小辣椒 发表于 2024-11-30 21:05

尘世中迷路的人 (合唱版)

<style>
    #papa { position: relative; width: 1400px; height: 700px; background: #000 url('https://xlaj.cn/upfile/202411/30/01.jpg');
      box-shadow: 4px 4px 10px #000; z-index: 1; margin: 140px 0 48px calc(50% - 781px);overflow:hidden; border-radius:32px;}
    #Player { position: absolute; cursor: pointer; transition: 1.2s; animation: rot 8s linear infinite var(--state); z-index:10;}
    #Player:nth-of-type(1) { width: 70px; height: 70px; left: 550px; top: 430px; --deg: 1turn; }

    #Player:hover { filter: hue-rotate(60deg) drop-shadow(0 0 28px #000); --state: paused; }
    @keyframes rot { to { transform: rotate(var(--deg)); } }
      .dancer      { position: absolute; cursor: pointer;z-index:1;}

      .lrcShow{font:normal 28px sans-serif;position:absolute;top:85%;left:40%;color:transparent;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;z-index:999;}

      .lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;color: DimGray;background-image:linear-gradient(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(60,100%,50%),hsl(0,100%,50%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}

      @keyframes bgMove1{from{width:0;}to{width:100%;}}
      @keyframes bgMove0{from{width:0;}to{width:100%;}}      
</style>
<div id="papa">
   
    <img id="Player" src="https://xlaj.cn/upfile/202411/16/e7.png" alt="">   

    <img class="dancer" src="https://xlaj.cn/upfile/202411/30/01.jpg" alt="" style=" left: 0px; top: 0px; ">
    <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231030141805.jpg" alt="" style="left: 150px; top: 80px;">
    <img class="dancer" src="https://xlaj.cn/upfile/202411/30/06.gif" alt="" style="width:50px; height: 50px; top: 440px; left: 360px;">
    <img class="dancer" src="https://xlaj.cn/upfile/202411/30/07.gif" alt="" style="width:75px; height: 75px; left: 390px; top: 150px;">

    <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" style="left: 1080px; top: 90px;">

      <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(\'d\'n c.a(\'2\')){j.l.q=b(){6(1.7){1.7.h.p(1.7);1.7=o;1.3.i=\'\'}6(1.9){1.8=1.9}};j.l.m=b(){g 2=c.a(\'2\');g 4=1.4,5=1.5;6(4&5){6(!1.9){1.9=1.8}2.4=4;2.5=5;2.3.k=1.3.k;2.3.f=1.3.f;2.d(\'z\').y(1,0,0,4,5);x{1.8=2.A("B/t")}s(e){1.r(\'8\');2.3.w=\'v\';1.h.u(2,1);1.3.i=\'0\';1.7=2}}}}',38,38,'|this|canvas|style|width|height|if|storeCanvas|src|storeUrl|createElement|function|document|getContext||top|var|parentElement|opacity|HTMLImageElement|left|prototype|stop|in|null|removeChild|play|removeAttribute|catch|gif|insertBefore|absolute|position|try|drawImage|2d|toDataURL|image'.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;}('t y=7(){w 4.T.1d(4,1f)};y.1r={1i:y,T:7(C){x=C.A.J(/(^\\s*)|(\\s*$)/g,\'\');4.8=O.1k(\'.1l\');4.e=4.Q(x);4.P(C.1g)},Q:7(x){t p=x.J(/(^\\s*)|(\\s*$)/g,"").V(/\\r|\\n|\\r\\n/);t 9=1p 1q();F(M l=0;l<p.j;l++){M v=p.1m(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);i(v){H=p.1n(\']\');i(H>0)A=p.U(H+1);F(m=0;m<v.j;m++){L=v.U(1).J(\']\',\'\').V(/:/);B=(+L)*1e+(+L);i(9.j==0&&B!=0){9.S({f:0,G:\'\\1a\\R\\R\\1K\\1L\\1J\\1F\'})}9.S({f:+B.D(2),G:A})}}}9.1H(7(a,b){w(a.f-b.f)});F(k=0;k<9.j-1;k++){9.K=+(9.f-9.f).D(2)}10.Z(9);w 9},X:7(E){4.8.1G=4.8.1M.1v=4.e.G;4.8.o.u(\'--1w\',\'1x\'+(4.c%2));4.8.o.u(\'--E\',E+\'s\');4.8.o.u(\'--I\',\'11\');4.c++},P:7(N){4.6=O.1u("12");4.6.1y=z;4.6.1C=z;4.6.1D=1E;4.6.1z=N;4.8.1B(4.6);t 5=4;t 1b=0;4.c=0;4.6.h(\'1A\',7(){5.c=0;4.q()});4.6.h(\'1t\',7(){5.e.K=+(4.1s-5.e.f).D(2);});4.6.h(\'q\',7(){5.8.o.u(\'--I\',\'11\')});4.6.h(\'13\',7(){i(5.c==1&&4.W<1){5.6.q();w z}5.8.o.u(\'--I\',\'Y\')});4.6.h(\'1I\',7(){10.Z("12 1c, 19 q 15 14");5.8.o.17=\'16\';5.8.18(4)});4.6.h(\'1o\',7(){i(5.c<5.e.j){i(4.W>=5.e.f){5.X(5.e.K)}}});4.8.h(\'1h\',7(){i(5.6.Y){5.6.q()}1j{5.6.13()}})}}',62,111,'||||this|that|mObj|function|lrcShowObj|lrcs|||idx||lrcVec|seconds||addEventListener|if|length||index|||style|parts|play|||var|setProperty|chkTime|return|lyricTxt|lrcPlayerY|false|lrcTxt|_0|opts|toFixed|durTime|for|words|tIdx|aniPlayState|replace|dur|ta|let|mUrl|document|genPlayer|handleLrc|u0020|push|init|substr|split|currentTime|showLrc|paused|log|console|running|audio|pause|event|start|none|display|removeChild|remove|u00A9|turn|wrong|apply|60|arguments|audioURL|click|constructor|else|querySelector|lrcShow|match|lastIndexOf|timeupdate|new|Array|prototype|duration|canplay|createElement|lrc|aniName|bgMove|loop|src|ended|appendChild|muted|autoplay|true|u8f7b|innerHTML|sort|error|u5e74|u4e5f|u66fe|dataset'.split('|'),0,{}))

let lrctxt = `
同一首制作
尘世中迷路的人 (合唱版)
歌手：余火火   
画一个昏黄的黄昏
等一个不归的人
风在叩问谁的心门
是谁丢了爱的人
雪花 旋转落在掌纹
它是一滴泪痕
玫瑰啊玫瑰丢了魂
边绽放边不安分
我们都是尘世中迷路的人
努力寻找一盏可以指引的灯
寻觅之中相拥时你的温存
足够抵挡住寒冷
我们都是尘世中迷路的人
只是偷偷趁月色擦去伤痕
人海茫茫擦肩回眸笑的唇
是尘世最后一盏灯
。。。。。。
画一个昏黄的黄昏
等一个不归的人
风在叩问谁的心门
是谁丢了爱的人
雪花 旋转落在掌纹
它是一滴泪痕
玫瑰啊玫瑰丢了魂
边绽放边不安分
我们都是尘世中迷路的人
努力寻找一盏可以指引的灯
寻觅之中相拥时你的温存
足够抵挡住寒冷
我们都是尘世中迷路的人
只是偷偷趁月色擦去伤痕
人海茫茫擦肩回眸笑的唇
是尘世最后一盏灯
我们都是尘世中迷路的人
努力寻找一盏可以指引的灯
寻觅之中相拥时你的温存
足够抵挡住寒冷
我们都是尘世中迷路的人
只是偷偷趁月色擦去伤痕
人海茫茫擦肩回眸笑的唇
是尘世最后一盏灯
谢谢欣赏

`;
               
       let opts = {
                lrcTxt:lrctxt,
                              audioURL:"https://aod.cos.tx.xmcdn.com/storages/5890-audiofreehighqps/35/4C/GKwRIDoK4nZEACAAAAMehBIn.m4a"
      }
      let yP = new lrcPlayerY(opts);
//-----------------------------------------------------------------------------------------------------//
      var dancers = document.querySelectorAll('.dancer');
    var mState = () => {
      papa.style.setProperty('--state', yP.mObj.paused ? 'paused' : 'running');
      Player.title = yP.mObj.paused ? '播放' : '暂停';
                dancers.forEach(dancer => yP.mObj.paused ? dancer.stop() : dancer.play());
    };
      Player.onclick = () => {
                yP.mObj.paused ? (yP.mObj.play()) :
                                                      (yP.mObj.pause());
      }
    yP.mObj.onplaying = yP.mObj.onpause = () => mState();
   
</script>

小辣椒 发表于 2024-11-30 21:07

奇怪了，同样的文字颜色，这里出来不一样了，什么原因？

admin 发表于 2024-12-1 09:29

小辣椒 发表于 2024-11-30 21:07
奇怪了，同样的文字颜色，这里出来不一样了，什么原因？

{:5_118:}{:5_118:} 自己不注意看在粗心一点

小辣椒 发表于 2024-12-1 21:47

admin 发表于 2024-12-1 09:29
自己不注意看在粗心一点

谢谢~~~~{:6_174:}{:6_174:}{:6_174:}
粗心大意了

liumang 发表于 2024-12-1 22:29

小辣椒这个图有点年代感了:lol:lol

liumang 发表于 2024-12-1 22:30

这些特效点缀漂亮{:5_150:}{:5_150:}
页: [1]
查看完整版本: 尘世中迷路的人 (合唱版)