小辣椒 发表于 2024-12-28 22:01

醉人的花香--快三步舞曲


<style>
    #papa { position: relative; width: 1200px; height: 695px; background: #000 url('https://xlaj.cn/upfile/202412/28/GIF.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: 100px; height: 100px; left: 1020px; top: 520px; --deg: 1turn; }

    #Player:hover { filter: hue-rotate(60deg) drop-shadow(0 0 28px #6b9df0); --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:88%;left:12%;color:transparent;filter:drop-shadow(1px 1px 1px DarkBlue);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">
    01.png
    <img id="Player" src="https://xlaj.cn/upfile/202412/28/ann.png" alt="">   
    <img class="dancer" src="https://xlaj.cn/upfile/202412/28/GIF.gif " alt="" style=" left: 0px; top: 0px; width:99.5%;">
    <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231030141805.jpg" alt="" style="left: 150px; top: 80px;">
   <img class="dancer" src=" https://xlaj.cn/upfile/202412/28/01.png" alt="" style="left: 720px; top: 50px;">
    <img class="dancer" src="https://xlaj.cn/upfile/202412/28/6.png" alt="" style="left: 10px; top: 602px;">
    <img class="dancer" src="https://xlaj.cn/upfile/202412/28/wu.gif" alt="" style="left: 790px; top: 150px;">
    <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" style="left: 480px; top: 150px;">
    <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" style="left: 180px; top: 300px;">
      <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/upfile/202412/28/huax.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>

liumang 发表于 2024-12-29 14:19

{:5_152:}{:5_152:}{:5_152:}

liumang 发表于 2024-12-29 14:19

小辣椒跳起来{:5_128:}{:5_128:}

liumang 发表于 2024-12-29 14:20

背景动画做的漂亮{:5_150:}

liumang 发表于 2024-12-29 14:21

小辣椒周末快乐！{:5_149:}
页: [1]
查看完整版本: 醉人的花香--快三步舞曲