醉美水芙蓉 发表于 2024-11-12 20:56

学习贴《秋天的叶冬天的雪》

<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>

秋思梦景 发表于 2024-11-12 21:18

问候老师好！精美音画佳作，精心制作分享！为您点赞！向您学习！{:5_116:}{:5_108:}{:4_204:}{:4_178:}

小辣椒 发表于 2024-11-12 21:29

欣赏水芙蓉精彩的制作，黑黑许多源码没有看了，这个播放器真漂亮，先去看看黑黑的源码。再回来欣赏

醉美水芙蓉 发表于 2024-11-12 21:31

秋思梦景 发表于 2024-11-12 21:18
问候老师好！精美音画佳作，精心制作分享！为您点赞！向您学习！

谢谢老师鼓励！

醉美水芙蓉 发表于 2024-11-12 21:32

小辣椒 发表于 2024-11-12 21:29
欣赏水芙蓉精彩的制作，黑黑许多源码没有看了，这个播放器真漂亮，先去看看黑黑的源码。再回来欣赏

谢谢小辣椒光临！

小辣椒 发表于 2024-11-12 21:35

这个鸟路径是我的{:4_170:}

醉美水芙蓉 发表于 2024-11-12 21:43

小辣椒 发表于 2024-11-12 21:35
这个鸟路径是我的

路径是你的，播放器是红影的！

小辣椒 发表于 2024-11-12 21:47

醉美水芙蓉 发表于 2024-11-12 21:43
路径是你的，播放器是红影的！

播放器是红影的啊，难怪我黑黑源码里面没有找到

醉美水芙蓉 发表于 2024-11-12 21:49

小辣椒 发表于 2024-11-12 21:47
播放器是红影的啊，难怪我黑黑源码里面没有找到

《在时间的河上》（学习黑黑《百鸟归巢》代码效果）@小辣椒

起个网名好难 发表于 2024-11-12 21:53

赞一个

醉美水芙蓉 发表于 2024-11-12 21:55

起个网名好难 发表于 2024-11-12 21:53
赞一个

谢谢老师的播放器！

红影 发表于 2024-11-12 22:27

漂亮，欣赏水芙蓉美女好帖{:4_204:}

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

红影 发表于 2024-11-12 22:27
漂亮，欣赏水芙蓉美女好帖

谢谢红影设计的播放器图片！

杨帆 发表于 2024-11-13 12:24

视听盛宴，赏心悦目，谢谢醉美老师精彩分享{:4_204:}

醉美水芙蓉 发表于 2024-11-13 17:05

杨帆 发表于 2024-11-13 12:24
视听盛宴，赏心悦目，谢谢醉美老师精彩分享

谢谢友友支持！

老谟深虑 发表于 2024-11-13 17:44

          谢谢老师的精美音画，点赞！

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

老谟深虑 发表于 2024-11-13 17:44
谢谢老师的精美音画，点赞！

谢谢老师支持!

红影 发表于 2024-11-13 20:33

醉美水芙蓉 发表于 2024-11-12 22:43
谢谢红影设计的播放器图片！

不客气，大家一起玩{:4_187:}
页: [1]
查看完整版本: 学习贴《秋天的叶冬天的雪》