|
|
楼主 |
发表于 2024-1-10 12:25:09
|
显示全部楼层
IP:湖北武汉
- <style>
- .lrcShow{font:bold 3em 楷体;position:absolute;bottom:10px;height:auto;left:20%;color:lightgray;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;--lrcTxt:'click to play';}
- .lrcShow::before{position:absolute;content:var(--lrcTxt);width:0;height:100%;left:0;top:0;color:darkred;background-image:linear-gra**nt(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
- .lrcShow {right:5%;top:50px;font-size:36px;color:lightblue;writing-mode: vertical-rl;}
- .lrcShow::before {writing-mode: vertical-rl;}
- @keyframes bgMove0 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
- @keyframes bgMove1 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
- #outframe {
- width:1200px;height:520px;position: relative;box-shadow: 0 0 8px #000;margin: 80px auto ;
- overflow:hidden;border-radius:24px;background:no-repeat cover/center;background-color:skyblue;
- }
- </style>
- <div id="outframe">
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
- version="1.1" viewBox="0 0 720 400">
- <image xlink:href="https://i0.hdslb.com/bfs/archive/1351693483a5f5543357a067d6ddd22ee484cfca.jpg" width="720" height="400" x="0" y="0" opacity='0' preserveAspectRatio="none" >
- <animate id="bp0" attributename="opacity" from='0' to='1' begin="0; ep3.end-4" dur='4s' fill="freeze"/>
- <animate id="ep0" attributename="opacity" from=1' to='0' begin="bp0.begin+18" dur='3s' fill="freeze"/>
- </image>
- <image xlink:href="https://i1.hdslb.com/bfs/archive/0a59a3f6039df450a41c48f609d286a2638b7e3e.jpg" width="720" height="400" x="0" y="0" opacity='0' preserveAspectRatio="none" >
- <animate id="bp1" attributename="opacity" from='0' to='1' begin="ep0.end-4" dur='4s' fill="freeze"/>
- <animate id="ep1" attributename="opacity" from=1' to='0' begin="bp1.begin+18" dur='3s' fill="freeze"/>
- </image>
- <image xlink:href="https://puui.qpic.cn/vpic_cover/k35336hxsve/k35336hxsve_1702768368_hz.jpg" width="720" height="400" x="0" y="0" opacity='0' preserveAspectRatio="none" >
- <animate id="bp2" attributename="opacity" from='0' to='1' begin="ep1.end-4" dur='4s' fill="freeze"/>
- <animate id="ep2" attributename="opacity" from=1' to='0' begin="bp2.begin+18" dur='3s' fill="freeze"/>
- </image>
- <image xlink:href="https://pic.rmb.bdstatic.com/a12be7dd4c45d0b68968b631fc8060dd.jpg" width="720" height="400" x="0" y="0" opacity='0' preserveAspectRatio="none" >
- <animate id="bp3" attributename="opacity" from='0' to='1' begin="ep2.end-4" dur='4s' fill="freeze"/>
- <animate id="ep3" attributename="opacity" from=1' to='0' begin="bp3.begin+18" dur='3s' fill="freeze"/>
- </image>
- </svg>
- <div class="lrcShow" >click to play</div>
- </div>
- <script type="text/javascript" >
- eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('J K=j(){t 4.Z.1C(4,15)};K.12={1b:K,Z:j(G){x=G.w.F(/(^\\s*)|(\\s*$)/g,\'\');4.6=P.1a(\'.18\');4.8=4.Y(x);4.T(G.1e)},Y:j(x){J p=x.F(/(^\\s*)|(\\s*$)/g,"").10(/\\r|\\n|\\r\\n/);J 9=14 1d();B(X l=0;l<p.h;l++){X v=p[l].1f(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);e(v){E=p[l].1c(\']\');e(E>0)w=p[l].M(E+1);B(m=0;m<v.h;m++){D=v[m].M(1).F(\']\',\'\').10(/:/);z=(+D[0])*19+(+D[1]);e(9.h==0&&z!=0){9.N({c:0,u:\'\\1g\\Q\\Q\\17\\11\\16\\13\'})}9.N({c:+z.A(2),u:w})}}}9.1z(j(a,b){t(a.c-b.c)});B(k=0;k<9.h-1;k++){9[k].H=+(9[k+1].c-9[k].c).A(2)}t 9},S:j(C){4.6.1w=4.8[4.7].u;4.6.f.o(\'--w\',\'"\'+4.8[4.7].u+\'"\');4.6.f.o(\'--1x\',\'1y\'+(4.7%2));4.6.f.o(\'--C\',C+\'s\');4.6.f.o(\'--y\',\'W\');4.7++},T:j(U){4.5=P.1G("V");4.5.1H=I;4.5.1I=I;4.5.1D=1E;4.5.1v=U;4.6.1l(4.5);4.7=0;4.5.i(\'1m\',()=>{4.7=0;4.5.q()});4.5.i(\'1k\',()=>{4.8[4.8.h-1].H=+(4.5.1s-4.8[4.8.h-1].c).A(2)});4.5.i(\'q\',()=>{4.6.f.o(\'--y\',\'W\');});4.5.i(\'O\',()=>{e(4.7==1&&4.5.L<1){4.5.q();t I}4.6.f.o(\'--y\',\'R\');});4.5.i(\'1r\',()=>{1o.1q("V 1p, 1u q 1t 1j");4.6.f.1i=\'1h\';4.6.1n(4)});4.5.i(\'1F\',()=>{e(4.7<4.8.h){e(4.5.L>=4.8[4.7].c){4.S(4.8[4.7].H)}}});4.6.i(\'1B\',()=>{e(4.5.R){4.5.q()}1A{4.5.O()}})}}',62,107,'||||this|mObj|lrcShowObj|idx|lrcVec|lrcs|||seconds||if|style||length|addEventListener|function||index|||setProperty|parts|play|||return|words|chkTime|lrcTxt|lyricTxt|aniPlayState|_0|toFixed|for|durTime|ta|tIdx|replace|opts|dur|false|var|lrcPlayerY|currentTime|substr|push|pause|document|u0020|paused|showLrc|genPlayer|mUrl|audio|running|let|handleLrc|init|split|u66fe|prototype|u8f7b|new|arguments|u5e74|u4e5f|lrcShow|60|querySelector|constructor|lastIndexOf|Array|audioURL|match|u00A9|none|display|event|canplay|appendChild|ended|removeChild|console|wrong|log|error|duration|start|remove|src|innerHTML|aniName|bgMove|sort|else|click|apply|autoplay|true|timeupdate|createElement|loop|muted'.split('|'),0,{}))
- var lrctxt = `
- [00:00.000]相逢是首歌\n[00:57.899]你曾对我说 相逢是首歌\n[01:09.949]眼睛是春天的海青春是绿色的河\n[01:21.949]你曾对我说 相逢是首歌\n[01:33.959]眼睛是春天的海青春是绿色的河\n[01:45.999]相逢是首歌 同行是你和我\n[02:09.900]相逢是首歌 同行是你和我\n[02:21.720]心儿是年轻的太阳真诚也活泼\n[02:21.840]心儿是年轻的太阳真诚也活泼\n[02:36.670]愿你们是活泼的小精灵!\n[03:00.990]你曾对我说 相逢是首歌\n[03:12.940]分别是明天的路思念是生命的火\n[03:24.940]相逢是首歌 歌手是你和我\n[03:36.680]心儿是永远的琴弦坚定也执着\n[03:48.850]相逢是首歌 歌手是你和我\n[04:00.770]心儿是永远的琴弦坚定也执着\n[04:13.500]啦啦啦 ......啦啦啦\n
- `;
- var opts = {
- lrcTxt:lrctxt,
- audioURL:"https://music.163.com/song/media/outer/url?id=235639.mp3"
- }
- new lrcPlayerY(opts);
- </script>
|
|
娟子欢迎您！
发表于 2024-1-10 11:58:53
Tjhxyz：放松心情，休息一下。