梦江南 发表于 2024-10-28 18:08

怪兽 套用黑黑老师的月背代码


<style>
#pa { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://cccimg.com/view.php/8d5704d7632336fcb1b610f9114e9b20.gif') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,6); z-index: 1; position: relative; }
.ell { fill: transparent; stroke: Orange; stroke-width: 8; filter: opacity(.5) drop-shadow(10px 0 12px navy); cursor: pointer; animation: bigger .2s var(--delay) alternate infinite var(--state); }
.ell:hover { stroke-width: 12; }
#vid { position: absolute; width: 100%; height: 100%; boject-fit: cover; mix-blend-mode: screen; pointer-events: none; -webkit-mask: linear-gradient(to top right, red 88%, transparent 0); }
@keyframes bigger { to { rx: 80; ry: 30; } }
</style>

<div id="pa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1942369" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/31/09/62d0f6b234ec0.mp4" autoplay loop muted></video>
      <svg id="svg1" width="100%" height="100%"></svg>
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=' + new Date().getTime();
document.body.appendChild(sc);
sc.onload = () => {
      var dr = _dr('#svg1');
      Array(total = 9).fill().forEach((_,key) => {
                let cx = 1024 / total * key + 55,
                        cy = key < Math.floor(total / 2) ? 430 + key * 30 : 400 + (total - key) * 30,
                        delay = `${-1 * Math.random()}`;
                dr.ellipse(cx , cy, 40, 60).set('class', 'ell').style(`--delay: ${delay}s`);
      });
      aud.onplaying = aud.onpause = () => mState();
      var ells = document.querySelectorAll('.ell');
      ells.forEach(ell => ell.onclick = () => aud.paused ? aud.play() : aud.pause());
      mState = () => {
                pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
                aud.paused ? vid.pause() : vid.play();
      };
};
</script>

起个网名好难 发表于 2024-10-28 19:23

欣赏美帖， 晚上好！

梦江南 发表于 2024-10-28 19:58

晚上好！谢谢老师！

红影 发表于 2024-10-28 20:55

有趣，这些小播效果好像锁住怪兽的锁链呢。
欣赏江南好帖{:4_199:}

红影 发表于 2024-10-28 20:56

构思奇特，江南把这个代码效果运用得很好呢{:4_187:}

小辣椒 发表于 2024-10-28 21:41

梦江南这个怪兽图图用的好，配这个音乐刚好{:4_199:}

小辣椒 发表于 2024-10-28 21:42

梦江南每次都是速度完成作业，小辣椒要向你学习的{:4_171:}

梦江南 发表于 2024-10-29 08:03

红影 发表于 2024-10-28 20:55
有趣，这些小播效果好像锁住怪兽的锁链呢。
欣赏江南好帖

问好影子，谢谢鼓励。{:4_187:}

梦江南 发表于 2024-10-29 08:06

红影 发表于 2024-10-28 20:56
构思奇特，江南把这个代码效果运用得很好呢

这张图片是电脑上的游戏图，把它拍下来正好做黑黑老师的月背代码。{:4_173:}

梦江南 发表于 2024-10-29 08:07

小辣椒 发表于 2024-10-28 21:41
梦江南这个怪兽图图用的好，配这个音乐刚好

这张图片是电脑上的游戏图，把它拍下来正好做黑黑老师的月背代码。{:4_173:}

梦江南 发表于 2024-10-29 08:12

小辣椒 发表于 2024-10-28 21:42
梦江南每次都是速度完成作业，小辣椒要向你学习的

您谦虚了，您同我的完成作业挡次不一样啊！我只会套用，您已经能创造出自己的东东了！{:4_187:}

红影 发表于 2024-10-29 21:54

梦江南 发表于 2024-10-29 08:03
问好影子，谢谢鼓励。

问好江南，不客气啊{:4_187:}

红影 发表于 2024-10-29 21:55

梦江南 发表于 2024-10-29 08:06
这张图片是电脑上的游戏图，把它拍下来正好做黑黑老师的月背代码。

哈哈，很符合这小播的特点呢{:4_173:}

梦江南 发表于 2024-10-30 08:18

红影 发表于 2024-10-29 21:54
问好江南，不客气啊

影子早上好。{:4_204:}

梦江南 发表于 2024-10-30 08:19

红影 发表于 2024-10-29 21:55
哈哈，很符合这小播的特点呢

歪打正着。{:4_173:}

红影 发表于 2024-10-30 20:10

梦江南 发表于 2024-10-30 08:18
影子早上好。

问好江南，祝快乐{:4_187:}

红影 发表于 2024-10-30 20:11

梦江南 发表于 2024-10-30 08:19
歪打正着。

也是意外之喜呢。

梦江南 发表于 2024-10-31 08:48

红影 发表于 2024-10-30 20:10
问好江南，祝快乐

谢谢影子，早上好！{:4_187:}

梦江南 发表于 2024-10-31 08:50

红影 发表于 2024-10-30 20:11
也是意外之喜呢。

有时候就是这样的，一种意想不到的效果。

红影 发表于 2024-10-31 14:18

梦江南 发表于 2024-10-31 08:48
谢谢影子，早上好！

马上要暴雨大风了，台风康妮今明两天就到了，不知是不是和上次一样可怕。
这两天尽量别出门哦{:4_187:}
页: [1] 2
查看完整版本: 怪兽 套用黑黑老师的月背代码