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

童年老家 - 马健涛


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

      #mydiv { margin: 130px 0 30px calc(50% - 781px); width: 1400px; height: 538px; background: url('https://file.uhsea.com/2411/da16ff44eea5d6879099879736c2a109RQ.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
      #msvg { position: absolute; left: 20%; top: 20%; 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: 40px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T950 10");animation: move 8s linear infinite;}
       #plane2 {position: absolute;left: 10px;top: 0;width: 40px;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/c9b23eb88226bec170bb1c271e65bbaeTT.gif" />
<img id="plane2" alt="" src="https://file.uhsea.com/2411/c9b23eb88226bec170bb1c271e65bbaeTT.gif" />
   

<img id="dt1" src="https://file.uhsea.com/2411/9a81e3b727a112013de4e4fe2c8d4382RK.gif" alt="" style="position: absolute; mix-blend-mode: multiply;rotate(360deg);/>   
<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/05/16/14/34/video63661b6a021fc.mp" autoplay loop muted></video>
      <svg id="msvg" width="150" height="150" 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, 'tan', 10, 'round').addTo('lines');
dr.line(-40, 0, 40, 0, '      Crimson', '2').addTo('lines');
dr.line(40, 0, 90, 0, 'tan', 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 = `
童年老家 - 马健涛
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：羡然文化
院子的狗尾巴
快高过了门梢
妈妈的味道依然随风飘
每当我放学后
肚子就咕咕叫
好想再喊一声妈我饿了
小时候玩泥巴
弄脏了衣服啊
妈妈的手会拍我屁股两下
那时候天还蓝
妈的腰还没弯
爸爸的白发还看不见
不知不觉长大
院子风吹雨打
当年的笑声再也没有了
那时候盼过年
如今我怕过年
童年的画面却破旧不堪
家乡的白杨阿
守护着老家
我若回家你还认得我吗
当年我不听话
总是气爹妈
如今我懂事他们却老了
院子的狗尾草
快高过了门梢
妈妈的味道依然随风飘
每当我放学后
肚子就咕咕叫
好想再喊一声妈我饿了
~Music~
不知不觉长大
院子风吹雨打
当年的笑声再也没有了
那时候盼过年
如今我怕过年
童年的画面却破旧不堪
家乡的白杨阿
守护着老家
我若回家你还认得我吗
当年我不听话
总是气爹妈
如今我懂事他们却老了
院子的狗尾草
快高过了门梢
妈妈的味道依然随风飘
每当我放学后
肚子就咕咕叫
好想再喊一声妈我饿了
家乡的白杨阿
守护着老家
我若回家你还认得我吗
当年我不听话
总是气爹妈
如今我懂事他们却老了
院子的狗尾草
快高过了门梢
妈妈的味道依然随风飘
每当我放学后
肚子就咕咕叫
好想再喊一声妈我饿了
☆谢谢欣赏☆
`;
      let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://file.uhsea.com/2411/ea2d6e41044648d932f12d1fd9b0f866FU.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-8 21:30

同一首完成

liumang 发表于 2024-11-8 22:29

小辣椒 发表于 2024-11-8 21:30
同一首完成

小辣椒完成了，很快哦{:5_150:}
页: [1]
查看完整版本: 童年老家 - 马健涛