论坛 › 欢乐水吧 › 蝴蝶泉边 学习黑黑老师的Truck代码

梦江南 发表于 2024-10-25 18:05

蝴蝶泉边 学习黑黑老师的Truck代码

<style>
#pa { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://www.yiyuen.com/e/file/view/665717') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative; }
.myball { offset-path: path('M 765 75 Q 950 400,590 526 T 0 0'); offset-distance: 0%; animation: move 10s var(--delay) linear infinite var(--state); }
#player { cursor: pointer; transform-box: fill-box; transform-origin: center; animation:rot 10s linear infinite var(--state) }
@keyframes move { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="pa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=5286070" autoplay loop></audio>
      <svg id="msvg" width="100%" height="100%"></svg>
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
document.body.appendChild(sc);

sc.onload = () => {
      var dr = _dr(msvg);
      dr.defs('defs'); //创建defs标签
      //小球
      dr.g('g1').addTo('defs');
      dr.circle(0,0,6,'#fff').addTo('g1');
      for(i = 0; i < 20; i ++) {
                let delay = -0.5 * i + 's';
                dr.use('#g1').set('class', 'myball').style(`--delay: ${delay}`);
      }
      //渐变
      var stop = `
          <stop offset="0%" stop-color="darkred"/>
          <stop offset="50%" stop-color="green"/>
          <stop offset="100" stop-color="Orange"/>
      `;
      var attr = {id: 'lgd', x1: 1, x2: 0, y1: 1, y2: 1};
      dr.gradient('linearGradient', attr, stop);
      //小播 : path 添加到 player
      dr.g('player').addTo('defs');
      for(var i = 0, tt = 10; i < tt; i++) {
                dr.path('M80 80 Q-120 90, 50 10', 'transparent', 'url(#lgd)', 8, 'round').transform(`rotate(${360/tt*i} 80 80)`).addTo('player');
      }
      dr.use('#player', 450, 300); //实例化小播
      aud.onplaying = aud.onpause = () => mState();
      player.onclick = () => aud.paused ? aud.play() : aud.pause();
      mState = () => {
                pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      };
};
</script>

起个网名好难 发表于 2024-10-25 18:36

http://5b0988e595225.cdn.sohucs.com/images/20180609/f85bb2266e7e495d8a8203f3e12af903.gif

红影 发表于 2024-10-25 19:40

漂亮，欣赏江南好帖{:4_187:}

红影 发表于 2024-10-25 19:41

到底是蝴蝶泉边啊，这么多漂亮的蝴蝶呢{:4_187:}

小辣椒 发表于 2024-10-25 20:37

梦江南这个蝴蝶动图用的漂亮{:4_199:}

小辣椒 发表于 2024-10-25 20:37

欣赏梦江南的精彩制作

梦油 发表于 2024-10-25 21:12

蝴蝶泉边这首歌很好听。

梦江南 发表于 2024-10-26 07:50

起个网名好难 发表于 2024-10-25 18:36


早上好，谢谢老师沙发支持。

梦江南 发表于 2024-10-26 07:52

红影 发表于 2024-10-25 19:40
漂亮，欣赏江南好帖

早上好，谢谢影子。周六快乐！{:4_187:}

梦江南 发表于 2024-10-26 07:55

红影 发表于 2024-10-25 19:41
到底是蝴蝶泉边啊，这么多漂亮的蝴蝶呢

您看蝴蝶泉边的蝴蝶飞来飞去多热闹！{:4_173:}

梦江南 发表于 2024-10-26 07:56

小辣椒 发表于 2024-10-25 20:37
梦江南这个蝴蝶动图用的漂亮

早上好，谢谢支持。{:4_187:}

梦江南 发表于 2024-10-26 07:57

小辣椒 发表于 2024-10-25 20:37
欣赏梦江南的精彩制作

小辣椒周六快乐！

梦江南 发表于 2024-10-26 07:58

梦油 发表于 2024-10-25 21:12
蝴蝶泉边这首歌很好听。

梦油老师，这是很经典的五朵金花电影里插曲。

红影 发表于 2024-10-26 12:41

梦江南 发表于 2024-10-26 07:52
早上好，谢谢影子。周六快乐！

问好江南，上午好。昨晚到现在一直在下雨，周六也只能家里蹲了{:4_173:}

红影 发表于 2024-10-26 12:42

梦江南 发表于 2024-10-26 07:55
您看蝴蝶泉边的蝴蝶飞来飞去多热闹！

这才是真正的蝴蝶泉边呢，江南的图图很好地呼应了歌曲{:4_187:}

梦江南 发表于 2024-10-26 14:41

红影 发表于 2024-10-26 12:41
问好江南，上午好。昨晚到现在一直在下雨，周六也只能家里蹲了

宁波同您那里一样，阴雨阵阵，这几天都是这个阴雨天。

梦江南 发表于 2024-10-26 14:44

红影 发表于 2024-10-26 12:42
这才是真正的蝴蝶泉边呢，江南的图图很好地呼应了歌曲

这是MP4转换过来的，对每张画面颜色作了加深处理。
今天刚刚163打不开了。

梦油 发表于 2024-10-26 16:28

梦江南 发表于 2024-10-26 07:58
梦油老师，这是很经典的五朵金花电影里插曲。

经典歌曲代代相传。

梦江南 发表于 2024-10-26 16:39

梦油 发表于 2024-10-26 16:28
经典歌曲代代相传。

经典歌曲久听不厌。

红影 发表于 2024-10-26 19:25

梦江南 发表于 2024-10-26 14:41
宁波同您那里一样，阴雨阵阵，这几天都是这个阴雨天。

是啊，我们两边离得近，天气也差不多{:4_173:}

查看完整版本: 蝴蝶泉边 学习黑黑老师的Truck代码