醉美水芙蓉 发表于 4 天前

冬天里的白玫瑰

<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:33ff66
      }
    #mydiv { margin: 30px 0 30px calc(50% - 730px); width: 1400px; height: 750px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/3589903c6fbef557c34996558e432814_preview.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; display: grid; place-items: center; position: relative; --state: running; }
        #msvg { position: absolute; left:5%; top: 28%; cursor: pointer; filter: drop-shadow(-5px -5px 10px black); animation: rot 8s linear infinite var(--state); }
        #msvg:hover { filter: hue-rotate(160deg); }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
        #fsbtn { position: absolute; bottom: 15px; color: white; padding: 2px 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="" alt=""/>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/11/07/14/54/36/video672c642ca64c1.mp4" autoplay loop muted></video>
      <svg id="msvg" width="300" height="300"></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 tt = 9, r1 = 150, r2 = 145, deg = 360 / tt, rad = Math.PI / 180 * deg, pstr = 'M150 150';
var stop = `
        <stop offset="0" stop-color="green" />
        <stop offset="1" stop-color="orange" />
`;

for(var i = 0; i < tt; i ++) {
        var x = r1 + r2 * Math.cos(rad * i), y = r1 + r2 * Math.sin(rad * i);
        pstr += `A60 30 ${deg * i} 0 0 ${x.toFixed(2)} ${y.toFixed(2)}A60 30 ${deg * i} 1 0 ${r1} ${r1}`;
}

dr.gradient('radialGradient', {id: 'rg', r: .8}, stop);
dr.path(pstr, 'url(#rg)').set('fill-rule', 'evenodd');



//      动态图片控制
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/1c15f3ec0de37d8524c85ae412e7da3f.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 发表于 3 天前

精美的画面，好听的音乐，谢谢醉美管理员经典分享~

醉美水芙蓉 发表于 3 天前

klxf 发表于 2024-11-18 13:19
精美的画面，好听的音乐，谢谢醉美管理员经典分享~

谢谢友友支持鼓励！
页: [1]
查看完整版本: 冬天里的白玫瑰