小辣椒 发表于 2024-9-14 14:21

匆匆岁月细细地过(治愈版) 歌手：赵乃吉

<style>
    #papa { position: relative; width: 1201px; height: 685px; background: #000 url('https://xlaj.cn/assets/file/zp/20240801142339.jpg ');
      box-shadow: 4px 4px 10px #000; z-index: 1; margin: 140px 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: 80px; height: 80px; left: 82%; bottom: 3%; --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 32px sans-serif;position:absolute;top:88%;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;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/assets/file/zp/20240627020733.png" alt="" title="暂停">

   <img class="dancer" src="https://xlaj.cn/assets/file/zp/20240801142316.gif" alt="" style="left: 0px; top: 0px; ">
   <img class="dancer" src="https://xlaj.cn/assets/file/zp/20240801142427.gif" alt="" style="width: 394px; height: 300px;left: 50px; top: 380px;">
   <img class="dancer" src="https://xlaj.cn/assets/file/zp/20240801142407.png" alt="" style="width: 250px; height: 133px;left: 400px; top: 100px;">
   <img class="dancer" src=" https://xlaj.cn/assets/file/zp/20240801142512.gif" alt="" style="width: 300px; height: 150px;left: 101px; top: 480px;">      
   <img class="dancer" src="https://xlaj.cn/assets/file/zp/20240801142450.gif" alt="" style="width: 120px; height: 133px;left: 990px; top: 280px;">
   <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" style="left: 200px; top: 80px;">
   <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" style="left: 860px; top: 220px;">
<img class="dancer" src="https://xlaj.cn/assets/file/zp/20240914140735.png" alt="" style="left: 1000px; top: 600px;">
      <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://xlaj.cn/assets/file/zp/20240801142248.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-14 14:22

@走过岁月
上去一个花的场景效果 一个时间指针音频效果

梦油 发表于 2024-9-14 14:38

那指针的摆动倒是很有趣。

岩新新 发表于 2024-9-14 14:40

欣赏学习！

走过岁月 发表于 2024-9-14 16:12

小辣椒 发表于 2024-9-14 14:22
@走过岁月
上去一个花的场景效果 一个时间指针音频效果

嗯，看到了

走过岁月 发表于 2024-9-14 16:14

这频谱周围加的效果点缀的漂亮

走过岁月 发表于 2024-9-14 16:15

小辣椒的每个帖的构想都很棒，得表扬一下

醉美水芙蓉 发表于 2024-9-14 17:03

红影 发表于 2024-9-14 17:39

这指针效果弄个小动图衬在下面，变得更奇妙了。
各种动态元素加得也漂亮。欣赏亲爱的好帖{:4_199:}

红影 发表于 2024-9-14 17:40

歌词同步也漂亮，而且特别神奇，暂停时能停在半个字上呢{:4_187:}

红影 发表于 2024-9-14 17:42

除了右边的一束花，其他的还能一键暂停呢。这制作真漂亮
匆匆岁月细细地过，感受生活的美好{:4_187:}

樵歌 发表于 2024-9-14 19:22

绚丽雅致极了。这是典型的“小辣椒音乐”原版！{:4_178:}

樵歌 发表于 2024-9-14 19:22

看了又看，很喜欢。

上海朝阳 发表于 2024-9-14 20:13

中秋快乐！

小辣椒 发表于 2024-9-15 18:05

梦油 发表于 2024-9-14 14:38
那指针的摆动倒是很有趣。

梦油好，谢谢欣赏，这个是岁月分享的一个透明音频效果，小辣椒现成玩的{:4_173:}

小辣椒 发表于 2024-9-15 18:06

岩新新 发表于 2024-9-14 14:40
欣赏学习！

谢谢欣赏~~~{:4_187:}

小辣椒 发表于 2024-9-15 18:07

走过岁月 发表于 2024-9-14 16:12
嗯，看到了

其实这个帖都是以前就做好的，你发了指针音频我就做好了{:4_173:}

小辣椒 发表于 2024-9-15 18:08

走过岁月 发表于 2024-9-14 16:14
这频谱周围加的效果点缀的漂亮

主要背景纯黑看上去效果很死板就加了一点背景效果进去

小辣椒 发表于 2024-9-15 18:09

走过岁月 发表于 2024-9-14 16:15
小辣椒的每个帖的构想都很棒，得表扬一下

好啊，需要经常表扬，鼓励，这样是给小辣椒玩的动力哦{:4_170:}

小辣椒 发表于 2024-9-15 18:09

醉美水芙蓉 发表于 2024-9-14 17:03
欣赏小辣椒精彩播放器！

谢谢水芙蓉欣赏{:4_171:}
页: [1] 2
查看完整版本: 匆匆岁月细细地过(治愈版) 歌手：赵乃吉