醉美水芙蓉 发表于 2024-11-10 19:26:05

凝眸

<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
      /**      歌词同步的设置，不满意可以调整下                */
      .lrcShow {
                        font: normal 2.2em 微软雅黑;
                        pointer-events:none;
                        left:30%;bottom:0px;
                        top:620px;
                        color:RoyalBlue;
                        z-index:99;
      }
      .lrcShow::before {
                        color:#4169E1
      }

      #mydiv { margin: 150px 0 30px calc(50% - 781px); width: 1400px; height: 750px; background: url('https://pic.imgdb.cn/item/672f624cd29ded1a8c9469c6.png') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
      #msvg { position: absolute; left: 10%; top: 10%; cursor: pointer; animation: rot 10s linear infinite var(--state); }
      #msvg:hover line { transition: 1s; stroke: CadetBlue; }
      #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
      #fsbtn { position: absolute; left: 50%; bottom: 15px; color: white; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }

       #plane1{position: absolute;left: 0px;top: 0;width: 80px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T1350 10");animation: move 8s linear infinite;}
       #plane2 {position: absolute;left: 10px;top: 0;width: 80px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T0 10");animation: move 8s linear infinite;}
       #dt1{ position: absolute; width: 140px; height: 165px; top: 345px; left: 1190px; }
      #dt2{ position: absolute; width: 32px; height: 32px; top: 450px; left: 110px; z-index: 1;}

      @keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
      @keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
      @keyframes move { to { offset-distance: 100%;} }
      @keyframes rot { to { transform: rotate(-360deg); } }

</style>

<div id="mydiv">

<img id="plane1" alt="" src="https://file.uhsea.com/2411/c6826b211e06d5a7a3f4873ce65f8db24Q.gif" />
<img id="plane2" alt="" src="https://file.uhsea.com/2411/c6826b211e06d5a7a3f4873ce65f8db24Q.gif" />
   
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt=""/>

      
      <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/30/45/62bac706237f8.mp" autoplay loop muted></video>
      <svg id="msvg" width="200" height="200" viewBox="-100 -100 200 200"></svg>
               
                <div class="lrcShow" data-lrc="凝眸" >凝眸</div>

      <span id="fsbtn"></span>
</div>

<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
dr.defs('defs');
dr.g('lines').addTo('defs');
dr.line(-90, 0, -40, 0, 'Orange', 10, 'round').addTo('lines');
dr.line(-40, 0, 40, 0, 'Crimson', '2').addTo('lines');
dr.line(40, 0, 90, 0, 'Orange', 10, 'round').addTo('lines');
var all = 6;
Array(all).fill('').forEach( (_,key) => dr.use('#lines').transform(`rotate(${180 / all * key})`) );


fscreen.fs('mydiv', 'fsbtn');


//      动态图片控制
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(\'p\'z l.j(\'3\')){g.n.y=k(){6(2.b){2.b.q.x(2.b);2.b=A;2.5.s=\'\'}6(2.c){2.a=2.c}};g.n.w=k(){v 7=2.a.m(-4);6(7==\'.\')7=7.m(1);6(7==\'u\')7=\'B\';2.r=\'J/\'+7;o 3=l.j(\'3\');o 9=2.9,8=2.8;6(9&&8){6(!2.c){2.c=2.a}3.9=9;3.8=8;3.5.f=2.5.f;3.5.d=2.5.d;3.5.h=2.5.h;3.5.i=2.5.i;3.p(\'D\').F(2,0,0,9,8);G{2.a=3.E(2.r)}C(e){2.H(\'a\');3.5.K=\'I\';2.q.t(3,2);2.5.s=\'0\';2.b=3}}}}',47,47,'||this|canvas||style|if|suff|height|width|src|storeCanvas|storeUrl|left||top|HTMLImageElement|right|bottom|createElement|function|document|substr|prototype|var|getContext|parentElement|type|opacity|insertBefore|jpg|let|stop|removeChild|play|in|null|jpeg|catch|2d|toDataURL|drawImage|try|removeAttribute|absolute|image|position'.split('|'),0,{}))

var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);

sf0.onload = () => {
      let lrctxt = `
凝眸 (《永夜星河》影视剧插曲) - 张远
词：陈可心
曲：胡宸@U.M.C
编曲：刘苏毅@U.M.C
制作人：王一栩/Bryan (孙伟)
出品人：王一栩
弦乐：国际首席爱乐乐团
大提琴：张平
音乐统筹：胡宸@U.M.C
混音/母带：丁晨泽
制作统筹：孙雅哲/李甜甜
监制：王一栩/张宇成
LRC编辑：醉美水芙蓉
说不清缘故
我 为何只顾着
将你拥住
千万缕酸楚
在 你泪滴划过我时放逐
世人无数
偏为你 神无主
连命数 都想宽恕
相思入骨
白首却无处
今生吻过你眉目
是我的救赎
别哭
握过你手心纹路
风雪不冷酷
乱世之中你向我凝眸
是我曾重生的一幕
爱过你让我一生 满足
说不清缘故
我 为何只顾着
将你拥住
千万缕酸楚
在 你泪滴划过我时放逐
世人无数
偏为你 神无主
连命数 都想宽恕
相思入骨
白首却无处
今生吻过你眉目
是我的救赎
别哭
握过你手心纹路
风雪不冷酷
乱世之中你向我凝眸
是我曾重生的一幕
爱过你让我一生 满足
今生吻过你眉目
是我的救赎
别哭
握过你手心纹路
风雪不冷酷
乱世之中你向我凝眸
是我曾重生的一幕
爱过你让我一生 满足
爱过你让我一生 满足
谢谢欣赏！☆
`;
      let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://cccimg.com/view.php/7b6a4078b3ef103d2b734c8fe33e4f95.mp3",
      }
      let player = new lrcPlayerY(opts);

    msvg.onclick = () => {
            msvg.style.setProperty('--state', ['paused','running'][+player.mObj.paused]);
            player.mObj.paused ? (player.mObj.play(), vid.play(), plane1.play(), plane2.play()) : (player.mObj.pause(), vid.pause(), plane1.stop(), plane2.stop());
    };
      
      player.mObj.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));

}

</script>

红尘过客 发表于 前天 20:45

这个作品漂亮！！！！
页: [1]
查看完整版本: 凝眸