醉美水芙蓉 发表于 2026-9-25 17:13:48

十一经典老歌 - 五百年桑田沧海

<meta charset="UTF-8">   
    <style>
      #papa {
            position: relative;
            width: 1300px;
            height: 720px;
            background: #000 url(' ');
            box-shadow: 2px 2px 6px #000;
            z-index: 1;
          margin: 150px 0 150px calc(0% - 230px);
            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: 100px;
            height: 100px;
            left: 180px;
            bottom: 60%;
            --deg: 1turn;
      }

      #Player:hover {
            filter: hue-rotate(60deg) drop-shadow(0 0 28px #1b28d3);
            --state: paused;
      }

      @keyframes rot {
            to { transform: rotate(var(--deg)); }
      }

      .dancer {
            position: absolute;
            cursor: pointer;
            z-index: 1;
      }

      .robot {
            left: 0px;
            top: 0px;
            width: 258px;
            height: auto;
            animation: robotWalk 12s infinite alternate ease-in-out;
      }

      @keyframes robotWalk {
            0% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-15px) rotate(2deg); }
            50% { transform: translateY(0) rotate(0deg); }
            75% { transform: translateY(-15px) rotate(-2deg); }
            100% { transform: translateY(0) rotate(0deg); }
      }
      .robot {
            animation-play-state: var(--state, running);
      }

      .lrcShow {
            font: normal 24px sans-serif;
            position: absolute;
            bottom: 25%;
            left: 44%;
            color: transparent;
            filter: drop-shadow(1px 2px 1px Black);
            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: MintCream;
         background-image: linear-gradient(60deg, 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://cnup.cnzv.cc/view.php/ZjExMmU.png" alt="" title="播放">
      <img class="dancer" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/8f5d7d5b59a08a4b6765aaf8efe9a18a_preview.webp" alt="" style="left: 0px; top: 0px; width:99.9%;">
      <img class="dancer" src="bt.png" alt="" style=" left: 630px; top: 40px; ">
      <img class="dancer" src="https://cnup.cnzv.cc/view.php/ZjExM2U.gif" alt="" style="left:1000px; top: 90px;width: 100px;height: 99px;">
      <img class="dancer robot" src="hd.png" alt="" style="left:100px; top: -1280px; width: 258px;height: 516px;">

      <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 = `十一经典老歌 - 五百年桑田沧海
LRC编辑：醉美水芙蓉
五百年桑田沧海
顽石也长满青苔
长满青苔
只一颗心儿未死
向往着逍遥自在
向往着逍遥自在
哪怕是野火焚烧
哪怕是冰雪覆盖
依然是志向不改
依然是信念不衰
蹉跎了岁月
激荡着情怀
为什么 为什么
偏有这样的安排
五百年桑田沧海
顽石也长满青苔
长满青苔
只一颗心儿未死
向往着逍遥自在
向往着逍遥自在
哪怕是野火焚烧
哪怕是冰雪覆盖
依然是志向不改
依然是信念不衰
蹉跎了岁月
伤透了情怀
为什么？为什么？
偏有这样的安排
为什么？为什么？
偏有这样的安排
谢谢欣赏！
`;
let opts = {
    lrcTxt: lrctxt,
    audioURL: "https://www.joy127.com/url/159199.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();
mState();
</script>

klxf 发表于 2026-9-27 12:31:33

新颖有趣，谢谢精彩分享

醉美水芙蓉 发表于 2026-9-27 14:12:28

klxf 发表于 2026-9-27 12:31
新颖有趣，谢谢精彩分享

谢谢友友光临！

llz123 发表于 2026-9-27 21:52:10

欣赏美芙蓉佳作。这个帖子偏右了，这个代码是根据花潮的论坛样式设置的，花潮还是窄屏，纳兰是宽屏，居中代码就需要修改，你将#papa选择器里的这行代码 margin: 10px 0 48px calc(0% - 0px);，替换成下面的代码：margin: 150px 0 150px calc(0% - 230px);   应该可以居中，230px可以视情况修改。

醉美水芙蓉 发表于 2026-9-28 21:32:23

llz123 发表于 2026-9-27 21:52
欣赏美芙蓉佳作。这个帖子偏右了，这个代码是根据花潮的论坛样式设置的，花潮还是窄屏，纳兰是宽屏，居中代 ...

谢谢老师光临指导！我改过来了！
页: [1]
查看完整版本: 十一经典老歌 - 五百年桑田沧海