梦江南 发表于 2025-9-23 14:17

回家的路，

本帖最后由 梦江南 于 2025-9-23 14:09 编辑 <br /><br /><meta charset="UTF-8">
<style>
      @import 'https://638183.freep.cn/638183/web/css/tz01.css';
      #pa { --offsetX: 64px; --bg: #ccc url('https://cccimg.com/view.php/7b0f4f18470a479bdc63a9b9f49485ad.gif') no-repeat center/cover; }
      #progress { position: absolute; width: 8vw; height: 8vw;left: 30%;bottom: 180px;}
      #prog, #track { fill: none; stroke: MintCream; stroke-width: 16; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
      #prog { stroke-opacity: 1; }
      #player { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: transparent; animation: rotate 8s linear infinite var(--state); }
      #btnFs { left: 70%; top:20px;color: SkyBlue; border-color: LimeGreen tColor!important; }

#lrc { --bg: linear-gradient(180deg,hsla(240,50%,20%,.20),hsla(240,50%,20%,.35)); position: absolute; left: 30%; bottom: 60px;font:normal 2.0em Microsoft YaHei; sans-serif; color:Cyan white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }      
#dt2{ position: absolute; width:250px; height: 190px; top: 40px; left: 30%; }
</style>
<div id="pa">
   <img id="dt2" src="http://tuku.link/imgs/2023/10/de14c581eb6e09c2.gif" alt="" />
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2736300070.mp3" autoplay loop></audio>
      <video class="qk-vid" src="https://video.699pic.com/videos/53/79/44/b_IJqrbgSCM2In1563537944_10s.mp4" autoplay loop muted></video>
               
      <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
                <g id="player" class="sepia"><title>ALT+X</title></g>
                <g id="pg"><title>调节进度</title></g>
      </svg>
</div>
<script type="module">
      import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
      import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js';            
                import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
      var geci = [ ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
            
                lrc(pa, geci)
      
      var dr = Dr.dr(progress);
      var ranColor = () => `hsla(${Math.random() * 360}, 100%, 50%, .9)`;
      var ar1 = dr.circlePoints(20, 200, 180), ar2 = dr.circlePoints(3, 200, 120, 15);
      ar1.forEach(b => dr.circle(b, b, 20, ranColor()).addTo('player'));
      dr.circle(200,200,200).addTo('player');
      dr.polygon(ar2.join(',')).id('track').addTo('pg');
      dr.polygon(ar2.join(',')).id('prog').addTo('pg');
FS(pa, player);
</script>

东篱闲人 发表于 2025-9-23 15:05

这背影着实漂亮。。。{:4_204:}

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

这是AI动图吧，江南放在代码帖子里，特别好{:4_199:}

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

歌词同步也特别好，径向渐变的背景让歌词同步特别好看。
欣赏江南好帖{:4_199:}

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

这样动图的唯一问题是暂停时没法停下来呢{:4_173:}

杨帆 发表于 2025-9-23 15:46

漂亮，谢谢江南精彩分享{:4_204:}

梦江南 发表于 2025-9-23 15:52

东篱闲人 发表于 2025-9-23 15:05
这背影着实漂亮。。。

问好东篱老师，谢谢首席欣赏支持。{:4_204:}

梦江南 发表于 2025-9-23 15:55

红影 发表于 2025-9-23 15:38
这是AI动图吧，江南放在代码帖子里，特别好

问好影子，是的，本来想把这个动图做成MP4来放的，不成功，只好再转换成GLF做底图了。{:4_204:}

梦江南 发表于 2025-9-23 15:56

红影 发表于 2025-9-23 15:39
歌词同步也特别好，径向渐变的背景让歌词同步特别好看。
欣赏江南好帖

谢谢影子支持鼓励。{:4_187:}

梦江南 发表于 2025-9-23 15:57

红影 发表于 2025-9-23 15:42
这样动图的唯一问题是暂停时没法停下来呢

就是呢，这个问题不知怎么去解决。

梦江南 发表于 2025-9-23 15:58

杨帆 发表于 2025-9-23 15:46
漂亮，谢谢江南精彩分享

问好杨帆，谢谢欣赏支持。{:4_204:}

梦油 发表于 2025-9-23 17:07

回家的路，是心中那抹不灭的光，照亮着归途的每一步。

梦江南 发表于 2025-9-23 18:07

梦油 发表于 2025-9-23 17:07
回家的路，是心中那抹不灭的光，照亮着归途的每一步。

问好梦油，谢谢欣赏支持。{:4_204:}

梦油 发表于 2025-9-23 19:55

梦江南 发表于 2025-9-23 18:07
问好梦油，谢谢欣赏支持。

这是我想起每年的春节，那些需要车票的人是多么心焦啊。

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

欣赏阿姨精彩的制作{:4_187:}

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

这个背景图配的太好了，走路的人是那么的挺拔，很喜欢这个图，阿姨确实是高手，无论图图和播放器位子都恰到好处，歌词也是配的那么准，太喜欢了{:4_178:}

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

感谢阿姨精彩分享，制作辛苦了{:4_179:}

红影 发表于 2025-9-23 23:25

梦江南 发表于 2025-9-23 15:55
问好影子，是的，本来想把这个动图做成MP4来放的，不成功，只好再转换成GLF做底图了。

是的，如果是视频比较好控制暂停了。

红影 发表于 2025-9-23 23:25

梦江南 发表于 2025-9-23 15:57
就是呢，这个问题不知怎么去解决。

好像没法解决呢。

梦江南 发表于 2025-9-24 10:34

梦油 发表于 2025-9-23 17:07
回家的路，是心中那抹不灭的光，照亮着归途的每一步。

有爹娘的地方就是家啊！
页: [1] 2 3
查看完整版本: 回家的路，