杨帆 发表于 2025-9-22 18:45

《纸飞机》- 黑鸭子组合（学习小辣椒帖《难解(女声版) 》）

本帖最后由 杨帆 于 2025-9-25 10:23 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>《纸飞机》- 黑鸭子</title>
</head>
<body>
    <style>
      @import 'https://638183.freep.cn/638183/web/css/tz01.css';
      #pa { --offsetX:81px; --bg:url('https://www.helloimg.com/i/2025/09/21/68cfd2cf51f30.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://www.helloimg.com/i/2025/09/21/68cfd2cf51f30.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 8s 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://upfile.mp3.wf/view.php/c577747cbeaef35d1b23fe146f2eb3c3.mp3" autoplay loop></audio>
        <div class='intro'></div>
        <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/13/15/31/27/video6822f54f3f95f.mp4" 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>
</body>
</html>


梦江南 发表于 2025-9-22 18:55

纸飞机歌曲第一次听到，歌词还有意思。小播漂亮，会变色的精彩画面。欣赏杨帆好制作。{:4_187:}

梦江南 发表于 2025-9-22 19:03

纸飞机用了路径，用一只来做暂停、杨帆厉害。{:4_199:}

彩云归 发表于 2025-9-22 19:33

本帖最后由 彩云归 于 2025-9-22 19:36 编辑

欣赏佳作！歌曲收录在《博友单曲（同步歌词）汇编三（H5)》http://www.oldkids.cn/blog/view.php?bid=1797066第813首黑鸭子组合《纸飞机》/杨帆。敬请浏览！

杨帆 发表于 2025-9-22 20:23

本帖最后由 杨帆 于 2025-9-22 20:24 编辑

梦江南 发表于 2025-9-22 18:55
纸飞机歌曲第一次听到，歌词还有意思。小播漂亮，会变色的精彩画面。欣赏杨帆好制作。

问好江南，《纸飞机》是好久前我经常听的一首歌曲

看了小辣椒帖《难解(女声版) 》，鼓捣了这个帖子

谢谢江南鼓励{:4_204:}

杨帆 发表于 2025-9-22 20:25

梦江南 发表于 2025-9-22 19:03
纸飞机用了路径，用一只来做暂停、杨帆厉害。

鼓捣着玩呢，谢谢鼓励{:4_171:}

红影 发表于 2025-9-22 20:38

这制作真漂亮，纸飞机的路径设计也漂亮
欣赏杨帆好帖{:4_199:}

杨帆 发表于 2025-9-22 20:49

本帖最后由 杨帆 于 2025-9-23 22:24 编辑

彩云归 发表于 2025-9-22 19:33
欣赏佳作！歌曲收录在《博友单曲（同步歌词）汇编三（H5)》http://www.oldkids.cn/blog/view.php?bid=17970 ...
谢谢彩云归老师鼓励~

这个《汇编》，内容丰富，看得出凝聚了您不少心血，如可查看源码就更好了

为弘扬“开放、合作、共享”的互联网开源精神点赞{:4_204:}

杨帆 发表于 2025-9-22 21:31

红影 发表于 2025-9-22 20:38
这制作真漂亮，纸飞机的路径设计也漂亮
欣赏杨帆好帖

鼓捣着玩呢，谢谢影子鼓励{:4_187:}

偶然~ 发表于 2025-9-22 22:50

制作大气

偶然~ 发表于 2025-9-22 22:50

音画唯美

偶然~ 发表于 2025-9-22 22:50

感谢杨帆带来的精彩，辛苦了。

杨帆 发表于 2025-9-22 23:07

偶然~ 发表于 2025-9-22 22:50
制作大气

问好偶然~，鼓捣着玩呢，谢谢兄弟鼓励{:4_191:}

红影 发表于 2025-9-23 15:51

杨帆 发表于 2025-9-22 21:31
鼓捣着玩呢，谢谢影子鼓励

非常漂亮呢，杨帆的制作很多都很漂亮的{:4_199:}

小辣椒 发表于 2025-9-23 22:13

欣赏杨帆的精彩制作，这个紫飞机好像尺寸大了一点哦，小一点可能画面效果更加好

小辣椒 发表于 2025-9-23 22:14

杨帆做帖会用脑子，向你学习{:4_187:}

小辣椒 发表于 2025-9-23 22:15

其实杨帆的飞机路径做的比小辣椒好哦{:4_199:}

杨帆 发表于 2025-9-23 22:27

小辣椒 发表于 2025-9-23 22:13
欣赏杨帆的精彩制作，这个紫飞机好像尺寸大了一点哦，小一点可能画面效果更加好

刚把尺寸调小了一点，谢谢你的帖子《难解》，谢谢你的建议与鼓励{:4_204:}

杨帆 发表于 2025-9-23 22:40

小辣椒 发表于 2025-9-23 22:15
其实杨帆的飞机路径做的比小辣椒好哦

那个绿色飞机用的就是你原来的路径呢{:4_190:}

杨帆 发表于 2025-9-23 22:43

小辣椒 发表于 2025-9-23 22:14
杨帆做帖会用脑子，向你学习

你的帖子富有特色，值得好好学习{:4_187:}
页: [1]
查看完整版本: 《纸飞机》- 黑鸭子组合（学习小辣椒帖《难解(女声版) 》）