小辣椒 发表于 2025-1-10 21:28

同玩岁月-如果云知道

<style>
    #papa { position: relative; width: 1196px; height: 648px; background: #000 url('https://wj.zp68.com/lxx/yunhua/2025/01/10/2F.jpg');
      box-shadow: 4px 4px 10px #000; z-index: 1; margin: 140px 0 48px calc(50% - 680px);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: 120px; height: 120px; left: 80px; top: 80px; --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:90%;left:50%;color:transparent;filter:drop-shadow(1px 1px 1px Beige);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:RoyalBlue;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://wj.zp68.com/lxx/yunhua/2025/01/10/e.png" alt="">   

    <img class="dancer" src="https://wj.zp68.com/lxx/yunhua/2025/01/10/2F.gif" alt="" style=" left: 0px; top: 0px; ">
    <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231030141805.jpg" alt="" style="left: 150px; top: 100px;">
    <img class="dancer" src="https://wj.zp68.com/lxx/yunhua/2025/01/10/pp1.gif" alt="" style="width:700px; height: 340px; top: 350px; left: 380px;">
    <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" style=" left: 300px; top: 380px;">

    <img class="dancer" src="https://wj.zp68.com/lxx/yunhua/2025/01/10/bt.png " alt="" style="left: 1000px; top: 540px;">

      <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 = `
同玩岁月-如果云知道
如果云知道
歌手:许茹芸 (Valen Hsu)
爱一旦结冰 一切都好平静
泪水它一旦流尽 只剩决心
放逐自己在黑夜的边境
任由黎明一步一步向我逼近
想你的心 化成灰烬
真的有点累了 没什么力气
有太多太多回忆 哽住呼吸
爱你的心我无处投递
如果可以飞檐走壁找到你
爱的委屈 不必澄清
只要你将我抱紧
如果云知道
想你的夜慢慢熬
每个思念过一秒 每次呼喊过一秒
只觉得生命不停燃烧
如果云知道
逃不开纠缠的牢
每当心痛过一秒 每回哭醒过一秒
只剩下心在乞讨 你不会知道
。。。。。。
真的有点累了 没什么力气
有太多太多回忆 哽住呼吸
爱你的心我无处投递
如果可以飞檐走壁找到你
爱的委屈不必澄清
只要你将我抱紧
如果云知道 想你的夜慢慢熬
每个思念过一秒 每次呼喊过一秒
只觉得生命不停燃烧 如果云知道
逃不开纠缠的牢 每当心痛过一秒
每回哭醒过一秒 只剩下心在乞讨
你不会知道 每当心痛过一秒
每回哭醒过一秒
只剩下心在乞讨 你不会知道
谢谢欣赏


`;
               
       let opts = {
                lrcTxt:lrctxt,
                              audioURL:"https://wj.zp68.com/lxx/yunhua/2025/01/10/yunzhd.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>

小辣椒 发表于 2025-1-10 21:30

@走过岁月

岁月把二个效果都用上了,感觉云动效果我做的时间短了一点,今天总算完成一个了

小辣椒 发表于 2025-1-10 21:30

谢谢岁月精彩的AE制作分享{:4_179:}

走过岁月 发表于 2025-1-10 21:51

2个效果结合很完美

走过岁月 发表于 2025-1-10 21:52

里面好多的效果也不错

红影 发表于 2025-1-10 21:52

亲爱的还另外加了个人物呢,把那个跳动的粒子也加上了,还有漂亮的海鸥和花朵星星等效果,这个制作真美{:4_199:}

走过岁月 发表于 2025-1-10 21:53

小辣椒真棒,总把画面做得丰富多彩

红影 发表于 2025-1-10 21:53

小播用得也漂亮,给亲爱的点赞{:4_187:}

走过岁月 发表于 2025-1-10 21:53

表扬一下小辣椒,谢谢分享

小辣椒 发表于 2025-1-10 21:54

走过岁月 发表于 2025-1-10 21:51
2个效果结合很完美

岁月来了{:4_187:}

小辣椒 发表于 2025-1-10 21:54

走过岁月 发表于 2025-1-10 21:52
里面好多的效果也不错

发现你现在这个哔哩哔哩制作做起来效果一样的,你就这样上传挺好的

小辣椒 发表于 2025-1-10 21:56

红影 发表于 2025-1-10 21:52
亲爱的还另外加了个人物呢,把那个跳动的粒子也加上了,还有漂亮的海鸥和花朵星星等效果,这个制作真美{:4_ ...

亲爱的,也是做到现在才完成的,加效果花点时间的,再今天上传的链接换了,可能出来会慢一点

小辣椒 发表于 2025-1-10 21:56

走过岁月 发表于 2025-1-10 21:53
小辣椒真棒,总把画面做得丰富多彩

哈哈~~岁月夸奖小辣椒太开心了

小辣椒 发表于 2025-1-10 21:58

走过岁月 发表于 2025-1-10 21:53
表扬一下小辣椒,谢谢分享

哈哈~~~应该谢谢岁月的分享,否则我也是做不出来的

红影 发表于 2025-1-10 22:41

小辣椒 发表于 2025-1-10 21:56
亲爱的,也是做到现在才完成的,加效果花点时间的,再今天上传的链接换了,可能出来会慢一点

还可以,出来得很快的,我打开就看到了啊{:4_187:}

杨帆 发表于 2025-1-11 00:03

视听盛宴,动图可控,谢谢小辣椒精彩分享{:4_204:}

愤怒的葡萄 发表于 2025-1-11 00:45

我怎么听不了啊,是我电脑浏览器的问题吗?

起个网名好难 发表于 2025-1-11 08:04

小辣椒 发表于 2025-1-10 21:30
@走过岁月

岁月把二个效果都用上了,感觉云动效果我做的时间短了一点,今天总算完成一个了

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

梦江南 发表于 2025-1-11 08:31

咋一看,图片感觉眼熟,原来是重新加进了动态原素。小辣椒好厉害!{:4_187:}

梦油 发表于 2025-1-11 09:33

小辣椒朋友早晨好!这几个外文字母设计得真有意思。
页: [1] 2
查看完整版本: 同玩岁月-如果云知道