花甲走四方 发表于 2026-7-10 10:43

伊扬－纸飞机

<style>
      @import 'https://638183.freep.cn/638183/web/css/tz01.css';
      #pa { --offsetX:81px; --bg:url('https://picasa.eu.org/i/2026/07/10/6pqc0v.jpg') no-repeat center/cover; user-select:none; z-index:1; --ma-size:10%; --state:running; }
      #ma { display:block; left:20px; top:20px; background:url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; transition:1s; z-index:8; }
      #ma:hover { animation-play-state:paused; z-index:2; }
      #lrc { right:25px; bottom:25px; color:gray; }
      #lrc::before { background:linear-gradient(to right, HotPink, LightSkyBlue, Gold); background-clip:text; }
      #btnFs { right:30px; top:30px; color:#fff; }
      #msvg { position:absolute; display:block; z-index:8; transform-box:fill-box; transform-origin:center; cursor:pointer; display:var(--display); --display:inline; fill:url(#lGrd); left:20px; bottom:20px; transition:.5s; animation:sway .8s linear infinite alternate var(--state); }
      #msvg:hover { animation-play-state:paused; --state:var(--state); }
      .intro { margin:0; width:100%; height:100%; position:absolute; background:url('https://picasa.eu.org/i/2026/07/10/6s9178.jpg') no-repeat 50% 50%/100% 100%, linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde); background-size:cover; background-blend-mode:hard-light; animation:hue-rotate 10s linear infinite var(--state); z-index:1; }
      #plane { position:absolute; left:60px; top:0; width:100px; offset-distance:0; offset-path:path("M0 20 Q300 80, 700 350 T1331 100"); animation:move 18s linear infinite var(--state); }
      @keyframes sway { to { transform:rotate(8deg); } }
      @keyframes hue-rotate { 5% { transform:scale(1); opacity:1; } 20% { transform:scale(1); opacity:1; } 100% { transform:scale(8); opacity:0; } }
      @keyframes move { to { offset-distance:100%; } }
    </style>

<div id="pa">
        <audio id="aud" src="https://mpimg.cn/view.php/5cfe29fc14eec8c7a1b7309d5e8f5b5f.mp3" autoplay loop></audio>
        <div class='intro'></div>
        <video class="qk-vid" src="https://imgimg.qqdsw8.cn/view.php/54ef30a89ab54cb50cd508fbd06b51a2.webm" autoplay loop muted></video>
       <img id="plane" src="https://pic.imgdb.cn/item/632603e916f2c2beb1a6190b.png" alt="" />
       
        <svg id="ma" class="brightness" viewbox="-200 -200 400 400"><title> 播放/暂停 </title></svg>

        <div id="lrc" data-lrc="HUACHAO LRC">《纸飞机》- 伊扬</div>
        <svg id="svg" width="100%" height="100%" viewBox="0 0 1600 900">
                <defs>
                        <g id="svgShape" fill="white" stroke="snow">
                                <image x="0" y="0" width="112" height="62" href="https://pic1.imgdb.cn/item/68d007efc5157e1a88221bcc.png" />
                                <image x="-150" y="80" width="112" height="62" href="https://www.helloimg.com/i/2025/09/21/68cfe74b9896b.png" />
                                <image x="100" y="-120" width="112" height="62" href="https://www.helloimg.com/i/2025/09/21/68cfe662ec2e3.png" />
                        </g>
               
                        <path id="motionPath" d="M-100 400 C300 300, 500 600, 800 450 S1200 200, 1500 350 S1900 500, 2200 300" />
                                               
                        <linearGradient id="lGrd" gradientTransform="rotate(30)">
                                <stop offset="5%" stop-color="gold" />
                                <stop offset="55%" stop-color="red" />
                                <stop offset="95%" stop-color="DeepPink" />
                        </linearGradient>

                </defs>
        </svg>
       
      <svg id="msvg" class="sepia" width="120" height="120" viewBox="0 0 1024 1024"><title>暂停</title></svg>

</div>

<script type="module">
               
        import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
        import lrc from 'https://638183.freep.cn/638183/web/lrc/yslrc-only.js';
       
        var setting = { svg: svg, lz: 2, dur: 18, gap: 300 };
        FS(pa, ma, setting);
        var uses = svg.querySelectorAll('use');
        uses.forEach(u => u.style.setProperty('filter', `hue-rotate(${Math.random() * 360}deg)`));

        var dr = Dr.dr(ma);
        var tt = 20, d = 'M0 0 L-30 -100 Q0 50,30 -100, L0 0';
        Array.from({length: tt}).forEach((_,k) => {
                dr.path(d,'Lime','url(#lGrd)',3).transform(`rotate(${360/tt*k})`);
        });

    var dr = Dr.dr(msvg);
        var datas = [
                ['M992 96 v768l-308.16 -176 L480 928l -128 -448 -320 -128 960 -256z', '#548AFF'],
                ['M992 96 L544 608 l-64 320 -128 -448 L992 96z', '#4367E0'],
                ['M683.84 688 L480 928 l64 -320 139.84 80z', '#2744C1']
        ];
       
        datas.forEach(d => dr.path(d, d));   
       
        var geci = `                       
纸飞机
演唱：伊扬
作詞 : 張秦
作曲 : 楊沐恩
窗外一片蔚藍的天空
風總掠過銀色的翼
或許正載著歸來的你
心里卻明白只是幻想而已
我的心開始莫名的憂郁
天知道全都是因為你
給你的信怎么寫下去
不如為你疊一個紙飛機
飛在風里的紙飛機
載滿我對你的情和意
飛到那思念的另一邊
訴說我心中的癡迷
飛在風里的紙飛機
捎去我對你的惦記
漫長的等待的日子里
天天盼望與你相聚
我的心開始莫名的憂郁
天知道全都是因為你
給你的信怎么寫下去
不如為你疊一個紙飛機
飛在風里的紙飛機
載滿我對你的情和意
飛到那思念的另一邊
訴說我心中的癡迷
飛在風里的紙飛機
捎去我對你的惦記
漫長的等待的日子里
天天盼望與你相聚
飛在風里的紙飛機
載滿我對你的情和意
飛到那思念的另一邊
訴說我心中的癡迷
飛在風里的紙飛機
捎去我對你的惦記
漫長的等待的日子里
天天盼望與你相聚
制作：花甲走四方
感谢欣赏
        `;
       
        FS(pa, ma);
        lrc(pa, geci, 0, 0);
       
      msvg.onclick = ma.onclick = () => {
        aud.paused ? aud.play() : aud.pause();
       
        msvg.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    aud.onplaying = aud.onpause = () => {msvg.style.setProperty('--display' , aud.paused ? 'none ': 'inline');}

};
console.log("element:", element); // 查看是否是 undefined
   element.style.opacity = 0.5;
</script>

梦江南 发表于 2026-7-10 10:50

谢谢高老师带来精彩的音画。祝夏安！{:4_199:}

梦油 发表于 2026-7-10 12:47

欣赏精彩制作，问好花甲走四方。

红影 发表于 2026-7-10 13:33

背景里真的好多纸飞机呢，和歌曲完美呼应着。
这制作真美，欣赏高老师好帖{:4_199:}
页: [1]
查看完整版本: 伊扬－纸飞机