醉美水芙蓉 发表于 2024-11-12 22:27:01

秋天的叶冬天的雪

<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/673345e1d29ded1a8c8beda2.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
      #msvg { position: absolute; left: 33%; top: 7.6%; cursor: pointer; animation: rot 10s linear infinite var(--state); }
      #msvg:hover path { transition: 1s; stroke: lightblue; }
        #msvg:hover circle { transition: 1s; fill: lightblue; }
      #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://bpic.588ku.com/video_listen/588ku_video/22/11/03/05/45/30/video6362e4fa279f6.mp4" autoplay loop muted></video>
      <svg id="msvg" width="200" height="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');
var all = 12;
Array(all).fill(0).forEach( (_,k) => dr.path('M70 50 Q100 0,130 50', 'none', 'lightblue', 6, 'round').transform(`rotate(${360 / all * k} 100 100)`) );
var total = 12;
Array(total).fill(0).forEach( (_,k) => dr.path('M100 100 H42', 'none', 'lightblue', 3, 'round').transform(`rotate(${360 / all * k} 100 100)`) );
dr.circle(100, 100, 6, 'coral');
msvg.onclick = () => {
      msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
      aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
};

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 = `
秋天的叶冬天的雪-李俊佑、格雷西西西
作词：李俊佑
作曲：李俊佑
女
秋天的落叶等不到冬天的雪
LRC编辑：醉美水芙蓉
我给你的爱撑不到下个季节
从前多热烈都在一瞬间幻灭
落单的蝴蝶熬不过雨夜
秋天的落叶等不到冬天的雪
我给你的爱撑不到下个季节
心脏被撕裂最后一盏灯熄灭
候鸟已南飞来不及道别
男
落叶一片一片一片像心在滴血
心碎一块一块一块拼凑着误解
爱像风筝搁浅遗失在海边
秋风吹得泠冽而我在哽咽
女
秋天的落叶等不到冬天的雪
我给你的爱撑不到下个季节
从前多热烈都在一瞬间幻灭
落单的蝴蝶熬不过雨夜
秋天的落叶等不到冬天的雪
我给你的爱撑不到下个季节
心脏被撕裂最后一盏灯熄灭
候鸟已南飞来不及道别
男
落叶一片一片一片像心在滴血
心碎一块一块一块拼凑着误解
爱像风筝搁浅遗失在海边
秋风吹得泠冽而我在哽咽
女
秋天的落叶等不到冬天的雪
我给你的爱撑不到下个季节
从前多热烈都在一瞬间幻灭
落单的蝴蝶熬不过雨夜
秋天的落叶等不到冬天的雪
我给你的爱撑不到下个季节
心脏被撕裂最后一盏灯熄灭
候鸟已南飞来不及道别
女
秋天的落叶等不到冬天的雪
我给你的爱撑不到下个季节
从前多热烈都在一瞬间幻灭
落单的蝴蝶熬不过雨夜
秋天的落叶等不到冬天的雪
我给你的爱撑不到下个季节
心脏被撕裂最后一盏灯熄灭
候鸟已南飞来不及道别
☆谢谢欣赏☆
`;
      let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://cccimg.com/view.php/d7fea39956b175099683092df5cdedf3.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>

klxf 发表于 2024-11-14 20:31:38

真漂亮，谢谢醉美版主分享:)

顶不顶个球 发表于 3 天前

这个作品漂亮！！！！
页: [1]
查看完整版本: 秋天的叶冬天的雪