醉美水芙蓉 发表于 2024-10-21 21:08:30

晚秋

<style>
#tz {
      margin: 20px 0 30px calc(50% - 730px);
      width: 1280px;
      height:700px;
      background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/38141c04a0c1e4b2ef86f8439d40e158_preview.webp') no-repeat center/cover;
      box-shadow: 3px 3px 6px rgba(0,0,0,.6);
      overflow: hidden;
      z-index: 1;
      position: relative;
}
#player {
      position: absolute;
      left: calc(20% - 100px);
      margin: 50pxr;
      bottom: 80px;
      animation: rot 10s linear infinite var(--state);
}
use:nth-child(odd) { --bg: Yellow; }
use:nth-child(even) { --bg: palevioletred; }
@keyframes rot {
      to { transform: rotate(360deg); }
}

#dt2{ position: absolute; width:1200px; height: 700px; top: 40px; left: 220px; }
#dt3{ position: absolute; width: 480px; height: 150px; top: 480px; left: 80px; }
#dt4{ position: absolute; width: 1200px; height: 600px; top: 5px; left: 68px; }


.lrcShow {
      font:normal 30px sans-serif;
      position:absolute;
      right:40%;
         top:88%;
      z-index:9;
      color:#FFFF00;
      filter:drop-shadow(1px 1px 1px black);
      letter-spacing:2px;
      --aniName:bgMove1;
      --durTime:100ms;
      --aniPlayState:running;
      cursor:pointer;
}
.lrcShow::before {
      position:absolute;
      content:attr(data-lrc);
      width:0;
      height:100%;
      left:0%;
      top:0%;
      color:brown;
      background-image:url( );
      -webkit-background-clip:text;
      background-clip:text;
      overflow:hidden;
      white-space:nowrap;
      animation:var(--aniName) var(--durTime) linear forwards;
      animation-play-state:var(--aniPlayState);
}
@keyframes bgMove0 { from { width: 0%; } to { width: 100%; } }
@keyframes bgMove1 { from { width: 0%; } to { width: 100%; } }

</style>

<div id="tz" style="--state: paused;">

      <img class="dynpic" id="dt1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/38141c04a0c1e4b2ef86f8439d40e158_preview.web" alt="">
      <img class="dynpic" id="dt4" src="https://xlaj.cn/upfile/202410/01/xiax.gif " alt="">
    <img id="dt2" src="https://pic.imgdb.cn/item/67150db9d29ded1a8c19ae5d.png" alt="" >
   
      <svg id="player" width="120" height="120" viewBox="0 0 200 200">
                <title id="tt">播放/暂停</title>
                <defs>
                        <g id="p1" fill="none" stroke="var(--bg)" stroke-width="4" stroke-linecap="round" stroke-dasharray="4 6">
                              <path id="p1" d="M10 100 Q50 270,100 100 T 190 100">
                                        <animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite"></animate>
                              </path>
                        </g>
                </defs>
                <use href="#p1" transform="rotate(0 100 100)"></use>
                <use href="#p1" transform="rotate(30 100 100)"></use>
                <use href="#p1" transform="rotate(60 100 100)"></use>
                <use href="#p1" transform="rotate(90 100 100)"></use>
                <use href="#p1" transform="rotate(120 100 100)"></use>
                <use href="#p1" transform="rotate(150 100 100)"></use>
      </svg>
      <div class="lrcShow" data-lrc="晚秋 - 赵鹏" >晚秋 - 赵鹏</div>
</div>
<script>
//      动态图片控制
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=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('6(\'p\'z l.j(\'3\')){g.n.y=k(){6(2.b){2.b.q.x(2.b);2.b=A;2.5.s=\'\'}6(2.c){2.a=2.c}};g.n.w=k(){v 7=2.a.m(-4);6(7==\'.\')7=7.m(1);6(7==\'u\')7=\'B\';2.r=\'J/\'+7;o 3=l.j(\'3\');o 9=2.9,8=2.8;6(9&&8){6(!2.c){2.c=2.a}3.9=9;3.8=8;3.5.f=2.5.f;3.5.d=2.5.d;3.5.h=2.5.h;3.5.i=2.5.i;3.p(\'D\').F(2,0,0,9,8);G{2.a=3.E(2.r)}C(e){2.H(\'a\');3.5.K=\'I\';2.q.t(3,2);2.5.s=\'0\';2.b=3}}}}',47,47,'||this|canvas||style|if|suff|height|width|src|storeCanvas|storeUrl|left||top|HTMLImageElement|right|bottom|createElement|function|document|substr|prototype|var|getContext|parentElement|type|opacity|insertBefore|jpg|let|stop|removeChild|play|in|null|jpeg|catch|2d|toDataURL|drawImage|try|removeAttribute|absolute|image|position'.split('|'),0,{}))
//      歌词同步代码
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=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('C D=f(){x 4.Z.1n(4,18)};D.19={12:D,Z:f(F){v=F.I.J(/(^\\s*)|(\\s*$)/g,\'\');4.6=w.E(\'.1d\');4.1c=w.E(\'.1f\');4.P=w.E(\'.P\');4.9=4.N(v);4.R(F.1g);4.1e=u},N:f(v){C o=v.J(/(^\\s*)|(\\s*$)/g,"").T(/\\r|\\n|\\r\\n/);C 7=1m 1k();B(V h=0;h<o.e;h++){V q=o.1i(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);l(q){G=o.1j(\']\');l(G>0)I=o.W(G+1);B(m=0;m<q.e;m++){K=q.W(1).J(\']\',\'\').T(/:/);H=(+K)*17+(+K);l(7.e==0&&H!=0){7.S({c:0,z:\'\\1a\\O\\O\\1I\\1J\\1K\\1H\'})}7.S({c:+H.y(2),z:I})}}}7.1F(f(a,b){x(a.c-b.c)});B(k=0;k<7.e-1;k++){7.L=+(7.c-7.c).y(2)}x 7},10:f(A){4.6.1L=4.6.1t.1s=4.9.z;4.6.i.p(\'--1u\',\'1p\'+(4.8%2));4.6.i.p(\'--A\',A+\'s\');4.6.i.p(\'--M\',\'X\');4.8++},R:f(Y){4.5=w.1r("U");4.5.1q=u;4.5.1B=u;4.5.1A=1D;4.5.1C=Y;4.6.1x(4.5);4.8=0;4.5.j(\'1w\',()=>{4.8=0;4.5.t()});4.5.j(\'1z\',()=>{4.9.L=+(4.5.1y-4.9.c).y(2)});4.5.j(\'t\',()=>{4.6.i.p(\'--M\',\'X\')});4.5.j(\'1o\',()=>{l(4.8==1&&4.5.Q<1){4.5.t();x u}4.6.i.p(\'--M\',\'1v\')});4.5.j(\'1M\',()=>{1G.1E("U 16, 15 t 11 13");4.6.i.14=\'1b\';4.6.1l(4)});4.5.j(\'1h\',()=>{l(4.8<4.9.e){l(4.5.Q>=4.9.c){4.10(4.9.L)}}})}}',62,111,'||||this|mObj|lrcShowObj|lrcs|idx|lrcVec|||seconds||length|function||index|style|addEventListener||if|||parts|setProperty|chkTime|||play|false|lyricTxt|document|return|toFixed|words|durTime|for|var|lrcPlayerY|querySelector|opts|tIdx|_0|lrcTxt|replace|ta|dur|aniPlayState|handleLrc|u0020|progMeter|currentTime|genPlayer|push|split|audio|let|substr|running|mUrl|init|showLrc|start|constructor|event|display|remove|wrong|60|arguments|prototype|u00A9|none|indicator|lrcShow|mseek|slider|audioURL|timeupdate|match|lastIndexOf|Array|removeChild|new|apply|pause|bgMove|loop|createElement|lrc|dataset|aniName|paused|ended|appendChild|duration|canplay|autoplay|muted|src|true|log|sort|console|u8f7b|u4e5f|u66fe|u5e74|innerHTML|error'.split('|'),0,{}))

let lrctxt = `
晚秋 - 赵鹏
词：许建强
曲：许建强
编曲：许建强
LRC编辑：醉美水芙蓉
在这个陪着枫叶飘零的晚秋
才知道你不是我一生的所有
蓦然又回首 是牵强的笑容
那多少往事飘散在风中
怎么说相爱却要注定要分手
怎么能让我相信那是一场梦
情缘去难留 我抬头望天空
想起你说爱我到永久
心中藏着多少爱和愁
想要再次握住你的手
温暖你走后冷冷的清秋
相逢也只是在梦中
怎么说相爱却又注定要分手
怎么能让我相信那是一场梦
情缘去难留 我抬头望天空
想起你说爱我到永久
心中藏着多少爱和愁
想要再次握住你的手
温暖你走后冷冷的清秋
相逢也只是在梦中
在这个陪着枫叶飘零的晚秋
才知道你不是我一生的所有
看着你远走 让泪往心里流
为了你付出我所有
为了你付出我所有
谢谢欣赏！
`;
                  
let opts = {
      lrcTxt:lrctxt,
      audioURL:"http://cccimg.com/view.php/89ca18b770e6c44776a021a42f3638a6.mp3"
}
let yP = new lrcPlayerY(opts);
var dynpics = document.querySelectorAll('.dynpic');

player.onclick = () =>{dynpics.forEach(pic => yP.mObj.paused ? pic.play() : pic.stop()); yP.mObj.paused ? (yP.mObj.play(), player.unpauseAnimations()) : (yP.mObj.pause(), player.pauseAnimations())}
</script>

顶不顶个球 发表于 2024-10-31 13:16:36

这个作品漂亮！！！！

午老虎 发表于 2024-11-11 13:37:23

这个作品漂亮！！！！

蓝叶 发表于 2024-11-19 20:45:50

这个作品漂亮！！！！

翁奕童苑 发表于 2024-12-5 22:59:55

这个作品漂亮！！！！
页: [1]
查看完整版本: 晚秋