小辣椒 发表于 2024-9-27 21:46

把酒煮人生 TO：走过岁月


<style>
    #papa { position: relative; width: 1200px; height: 703px; background: #000 url('https://xlaj.cn/upfile/202409/26/0F.jpg');
      box-shadow: 4px 4px 10px #000; z-index: 1; margin: 100px 0 48px calc(50% - 681px);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: 150px; height: 150px; left: 80%; bottom: 70%;--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:80%;left:38%;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;background-image:linear-gradient(45deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,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/202409/26/ann.png" alt="" title="暂停">

    <img class="dancer" src="https://xlaj.cn/upfile/202409/26/0F.gif" alt="" style="left: 2px; bottom: 0px; ">
<img class="dancer" src="https://xlaj.cn/assets/file/zp/20240914140735.png" alt="" style="left: 10px; top: 580px;">

<img class="dancer" src="https://xlaj.cn/upfile/202409/26/btzi.png " alt="" style=" width: 112px; height: 392px; left: 52px;top:130px;">
   <img class="dancer" src="https://xlaj.cn/upfile/202409/26/42.gif " alt="" style=" width: 1200px; height: 80px; left: 2px;top:630px;">
   <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" style="left: 150px; top: 80px;">
   <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" style="left: 860px; top: 60px;">

      <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://file.uhsea.com/2409/375824470e92843e4b2e1cac9d19eb34YA.mp3 "
      }
      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-9-27 21:47

@走过岁月

岁月相思泪来了{:4_170:}

小辣椒 发表于 2024-9-27 21:48

我换了一首歌曲，没有用你原来的音乐，感觉配这个粒子稍微加点快节奏的歌曲还是可以的

走过岁月 发表于 2024-9-27 21:55

小辣椒 发表于 2024-9-27 21:47
@走过岁月

岁月相思泪来了

来了

走过岁月 发表于 2024-9-27 21:57

粒子穿过人物这效果设计不错，小辣椒总能做出新意的效果

小辣椒 发表于 2024-9-27 21:59

走过岁月 发表于 2024-9-27 21:55
来了

岁月晚上好

走过岁月 发表于 2024-9-27 21:59

谢谢小辣椒，抱抱 {:4_179:}

小辣椒 发表于 2024-9-27 22:01

走过岁月 发表于 2024-9-27 21:57
粒子穿过人物这效果设计不错，小辣椒总能做出新意的效果

我也是玩不出什么新的效果，总是时间匆匆忙忙的，做出来就可以了，还有几个没有发的，感觉效果不够满意

走过岁月 发表于 2024-9-27 22:01

小辣椒 发表于 2024-9-27 21:59
岁月晚上好

晚上好！

红影 发表于 2024-9-27 22:01

这些动态效果好漂亮啊，亲爱的制作真美{:4_199:}

红影 发表于 2024-9-27 22:02

酒杯的小播啊，也不怕美酒撒出来{:4_173:}

小辣椒 发表于 2024-9-27 22:02

走过岁月 发表于 2024-9-27 21:59
谢谢小辣椒，抱抱

应该谢谢岁月的精美制作{:4_179:}

小辣椒 发表于 2024-9-27 22:03

红影 发表于 2024-9-27 22:01
这些动态效果好漂亮啊，亲爱的制作真美

亲爱的，我也是用岁月的粒子效果玩玩

小辣椒 发表于 2024-9-27 22:05

红影 发表于 2024-9-27 22:02
酒杯的小播啊，也不怕美酒撒出来

哈哈，反正就是喝酒，用酒杯应该可以的{:4_173:}

红影 发表于 2024-9-27 22:08

小辣椒 发表于 2024-9-27 22:03
亲爱的，我也是用岁月的粒子效果玩玩

嗯嗯，这些效果好美啊{:4_187:}

红影 发表于 2024-9-27 22:09

小辣椒 发表于 2024-9-27 22:05
哈哈，反正就是喝酒，用酒杯应该可以的

没事，撒下来的正好喝掉就是了{:4_173:}

马黑黑 发表于 2024-9-27 22:11

{:4_174:}

东篱闲人 发表于 2024-9-27 22:14

着火啦？{:5_115:}

小辣椒 发表于 2024-9-27 22:17

东篱闲人 发表于 2024-9-27 22:14
着火啦？

烈火中永生{:4_170:}

小辣椒 发表于 2024-9-27 22:17

马黑黑 发表于 2024-9-27 22:11


{:4_180:}
页: [1] 2
查看完整版本: 把酒煮人生 TO：走过岁月