梦江南 发表于 2025-9-30 11:53

【月满花潮庆华诞】学习黑黑老师的（献给风和大地）代码


<style>
      @import 'https://638183.freep.cn/638183/web/css/tz02.css';
      #pa { --offsetX: 81px; --bg: tan url('https://cccimg.com/view.php/4b57dfecdf992903aa62cf4c9576b8eb.jpg') no-repeat center/cover; }
      #progress { position: absolute; top: 15%; left:51%;width: 5vw; height: 5vw; transition: .4s; }
      #progress:hover { transform: scale(2); }
      #g1 { cursor: pointer; fill: url(#grd); stroke: url('#grd'); stroke-width: 10; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
      #g2 { cursor: pointer; fill: none; stroke: #ea9133; stroke-width: 10; stroke-linecap: round; }
      #prog { stroke: url(#grd); }
      #btnFs { bottom: 20px; color: white; border-color: currentColor !important; }
      @keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="pa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2095505763.mp3" autoplay loop></audio>
      <video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/31/38/62d771d99618d.mp4" autoplay loop muted></video>
      <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <g id="g1"><title>ALT+X</title></g>
                <g id="g2"><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?v=1.1';

      var dr = Dr.dr(progress);
      dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['red',0],['darkred',0.5],['plum',1]]);
      dr.polygon('15 0,-50 110,50 140,15 0').addTo(g1).rotates(7);
      dr.path('M190 0 A160 140 -30 0 1 -190 0 A160 140 -30 0 1 190 0').id('track').addTo(g2);
      dr.path('M190 0 A160 140 -30 0 1 -190 0 A160 140 -30 0 1 190 0').id('prog').addTo(g2);
      
      FS(pa, g1);
</script>

偶然~ 发表于 2025-9-30 11:58

音画满满的中秋气氛

偶然~ 发表于 2025-9-30 11:58

制作大气

偶然~ 发表于 2025-9-30 11:58

音画唯美

偶然~ 发表于 2025-9-30 11:59

感谢梦江南带来的精彩，辛苦了！祝你国庆中秋快乐！

偶然~ 发表于 2025-9-30 12:00

本帖最后由 偶然~ 于 2025-9-30 12:04 编辑

月满花潮，论坛共话团圆夜

梦江南 发表于 2025-9-30 12:05

偶然~ 发表于 2025-9-30 11:58
音画满满的中秋气氛

好快的动作，我刚发出。谢谢辛苦了！{:4_187:}

梦江南 发表于 2025-9-30 12:06

偶然~ 发表于 2025-9-30 11:58
制作大气

谢谢夸赞。{:5_161:}

梦江南 发表于 2025-9-30 12:07

偶然~ 发表于 2025-9-30 11:58
音画唯美

谢谢鼓励。吃饭了吗？

偶然~ 发表于 2025-9-30 12:07

梦江南 发表于 2025-9-30 12:05
好快的动作，我刚发出。谢谢辛苦了！

月满花潮 礼赞中华

偶然~ 发表于 2025-9-30 12:08

梦江南 发表于 2025-9-30 12:07
谢谢鼓励。吃饭了吗？

准备了。。

梦江南 发表于 2025-9-30 12:11

偶然~ 发表于 2025-9-30 11:59
感谢梦江南带来的精彩，辛苦了！祝你国庆中秋快乐！

感谢你为论坛的双庆活动付出的辛苦。江南这点不辛苦。谢谢，祝你双庆快乐！

梦江南 发表于 2025-9-30 12:20

偶然~ 发表于 2025-9-30 12:00
月满花潮，论坛共话团圆夜

第一次参加这样的活动。辛苦了！

梦江南 发表于 2025-9-30 12:22

偶然~ 发表于 2025-9-30 12:07
月满花潮 礼赞中华

今年很特殊，意义深远。

杨帆 发表于 2025-9-30 12:58

唯美之作，精彩纷呈，祝江南双节快乐{:4_204:}

樵歌 发表于 2025-9-30 13:12

月挂长城天空上，美女月饼高大上！{:4_178:}

樵歌 发表于 2025-9-30 13:13

我最看中那个大月饼了，真想上去咬上一大口{:4_170:}

梦江南 发表于 2025-9-30 14:20

杨帆 发表于 2025-9-30 12:58
唯美之作，精彩纷呈，祝江南双节快乐

问好杨帆，谢谢欣赏，祝你双节快乐，阖家幸福。{:4_204:}

梦江南 发表于 2025-9-30 14:21

樵歌 发表于 2025-9-30 13:12
月挂长城天空上，美女月饼高大上！

问好樵歌老师，谢谢欣赏，辛苦了！祝双节快乐，阖家幸福！{:4_204:}

梦江南 发表于 2025-9-30 14:24

樵歌 发表于 2025-9-30 13:13
我最看中那个大月饼了，真想上去咬上一大口

樵 歌老师，这个月饼可是上海鲜肉馅的，非常好吃的。{:4_173:}
页: [1] 2
查看完整版本: 【月满花潮庆华诞】学习黑黑老师的（献给风和大地）代码