小辣椒 发表于 2024-12-20 21:15

风自远方来 TO:难难

<style>
    #papa { position: relative; width: 1279px; height: 700px; background: #000 url('https://i.mp3.wf/214413057/GIF.jpg ');
      box-shadow: 4px 4px 10px #666; z-index: 1; margin: 140px 0 48px calc(50% - 720px);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: 480px; top: 360px; --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 25px sans-serif;position:absolute;top:92%;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:LightSkyBlue;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://i.mp3.wf/214395810.png" alt="">   

    <img class="dancer" src="https://i.mp3.wf/214413040/GIF.gif" alt="" style=" left: 0px; top: 0px; ">   

      <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://i.mp3.wf/219454121.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-12-20 21:20

@起个网名好难

难难想送一首大气回肠的歌曲,一直没有喜欢的,就送这首风自远方来,让清风轻轻地吹来,吹来一切顺顺当当,然后身体健健康康,老血压也是吹走了{:4_205:}

小辣椒 发表于 2024-12-20 21:33

这个图可能会出来慢一点,今天一方面测试链接,没有压缩和压缩过的肯定不一样了

红影 发表于 2024-12-20 21:43

歌儿好听,制作漂亮。欣赏亲爱的好帖,难难收礼开心{:4_187:}

红影 发表于 2024-12-20 21:43

这个有趣,好像点暂停时动图都不见了?

红影 发表于 2024-12-20 21:44

字体设计很美,和背景拟合极好{:4_199:}

小辣椒 发表于 2024-12-20 21:50

红影 发表于 2024-12-20 21:43
这个有趣,好像点暂停时动图都不见了?
这个就是搞消失{:4_170:}

主要背景不是做的动图,求速度刚晚上赶出来的

杨帆 发表于 2024-12-20 22:51

谢谢小辣椒精彩制作,祝难难老师收礼开心{:4_191:}

起个网名好难 发表于 2024-12-21 06:36

小辣椒 发表于 2024-12-20 21:20
@起个网名好难

难难想送一首大气回肠的歌曲,一直没有喜欢的,就送这首风自远方来,让清风轻轻地吹来, ...

https://5b0988e595225.cdn.sohucs.com/images/20190801/37695ed443114a44bdc8e0d25cc84460.gif

起个网名好难 发表于 2024-12-21 06:38

https://5b0988e595225.cdn.sohucs.com/images/20190627/2fcecd89550b4c1cb36ee7bff90ab110.gif

梦江南 发表于 2024-12-21 08:28

好雅致的一幅图图,好好听的歌。难难老师收礼开心哈!{:4_187:}

红影 发表于 2024-12-21 11:18

小辣椒 发表于 2024-12-20 21:50
这个就是搞消失

主要背景不是做的动图,求速度刚晚上赶出来的

哦,原来是特地这样设置的啊{:4_173:}

世外桃源 发表于 2024-12-21 13:14

好听好看{:4_199:}

世外桃源 发表于 2024-12-21 13:14

欣赏佳作感谢分享

绿叶清舟 发表于 2024-12-21 21:06

那一抹淡淡的蓝加得太漂亮了

绿叶清舟 发表于 2024-12-21 21:07

辣椒的动图总是用得这么好

小辣椒 发表于 2024-12-21 21:19

杨帆 发表于 2024-12-20 22:51
谢谢小辣椒精彩制作,祝难难老师收礼开心

问好杨帆,谢谢欣赏{:4_187:}

小辣椒 发表于 2024-12-21 21:22

起个网名好难 发表于 2024-12-21 06:36


难难不好意思,这个是旧图我修改了一下用上了,昨天就想送一个礼物给你,来不及精功细作。就直接发了,但心是真诚的{:4_205:}

小辣椒 发表于 2024-12-21 21:23

起个网名好难 发表于 2024-12-21 06:38


难难晚上好{:4_187:}

小辣椒 发表于 2024-12-21 21:24

梦江南 发表于 2024-12-21 08:28
好雅致的一幅图图,好好听的歌。难难老师收礼开心哈!

阿姨,我是寻了一个旧图修改了一下,昨天匆匆忙忙的做了送难难老师,今天上来看看感觉好难为情的,图图不够精致
页: [1] 2
查看完整版本: 风自远方来 TO:难难