醉美水芙蓉 发表于 2024-11-14 22:32

学习贴《一世漂泊一世空》

<style>
    #papa { --width: 1300px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 720px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/cabf7640e7a110cb55098b9f83e7fa74_preview.jpg') no-repeat center/cover; z-index: 1; overflow: hidden; box-shadow: 3px 3px 8px #666; position: relative; }
    #Player { position: absolute; cursor: pointer; transition: 1.2s; animation: rot 8s linear infinite var(--state); z-index:10;}
    #Player:nth-of-type(1) { width: 150px; height:199px; right: 100px;bottom: 30px; --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;bottom:50px;left:30%;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:Lime;background-image:linear-gradient(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));-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://pic.imgdb.cn/item/673605e9d29ded1a8cbe9727.png" alt="">   
    <img class="dancer" src="" alt="" style="left: 0px; top: 0px; ">
    <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231030141805.jpg" alt="" style="left: 200px; top: 70px;">
    <img class="dancer" src="0.gif" alt="" style="left: 750px; top: 420px;">
    <img class="dancer" src="https://xlaj.cn/assets/file/zp/20231030141805.jpg" alt="" style="left: 500px; top: 170px;">
      
      <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://cccimg.com/view.php/a3c4a24e7a2e7c7c332f8b3609c95d2e.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-11-15 11:49

@有声有色 老师，你的图片改的播放器！

有声有色 发表于 2024-11-15 13:39

醉美水芙蓉 发表于 2024-11-15 11:49
@有声有色 老师，你的图片改的播放器！

{:5_116:}{:4_187:}

红影 发表于 2024-11-15 14:21

这个画面漂亮，歌曲好听。水芙蓉美女厉害，把有声有色老师的图片用在帖子中了呢{:4_199:}

红影 发表于 2024-11-15 14:23

鼠标触碰还能变色的。这个小播的旋转中心没完全居中呢，水芙蓉美女再调调？{:4_204:}

醉美水芙蓉 发表于 2024-11-15 19:17

红影 发表于 2024-11-15 14:23
鼠标触碰还能变色的。这个小播的旋转中心没完全居中呢，水芙蓉美女再调调？

谢谢红影美女鼓励，不居中改不了，图片本身就是不居中！

红影 发表于 2024-11-15 21:49

醉美水芙蓉 发表于 2024-11-15 19:17
谢谢红影美女鼓励，不居中改不了，图片本身就是不居中！

哦，还以为是比较规整的呢，原来不是啊{:4_204:}
页: [1]
查看完整版本: 学习贴《一世漂泊一世空》