论坛 › 欢乐水吧 › 梦幻岛 套用黑黑老师的大河之舞代码

梦江南 发表于 2024-9-13 13:40

梦幻岛 套用黑黑老师的大河之舞代码

本帖最后由 梦江南 于 2024-9-13 13:40 编辑 <br /><br /><style>
#mydiv { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 760px; background: url('https://pic.imgdb.cn/item/66e3b674d9c307b7e9498fd3.gif') center/cover; box-shadow: 03px 3px 6px #333; display: grid; place-items: center; position: relative; }
#svg1 { position: absolute; top: 56%; cursor: pointer; filter: hue-rotate(0deg) drop-shadow(0 0 4px black); transition: 1s; }
#svg1:hover { filter: hue-rotate(200deg) drop-shadow(0 0 4px black); }
</style>

<div id="mydiv">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=369439" autoplay loop></audio>
      <svg id="svg1" width="200" height="200" viewBox="0 0 200 200" fill="none" stroke="white" stroke-width="6" stroke-dasharray="6 12 6"></svg>
</div>

<script>
var ww = mydiv.offsetWidth;
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({papa: '#mydiv', css: 'bottom: 20px; --fsBg: #eeeeee90; --color: #336699;'});
var observer = new ResizeObserver((elms) => {
      var cr = elms.contentRect;
      svg1.style.transform = `scale(${cr.width / ww * 1.2})`;
});
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations());
drawCircles = (num) => {
      let circlecode = '', anicode = '';
      Array(num).fill(0).forEach((c,k) => {
                c = k + 1;
                let bstr = k > 0 ? `ani${k}.begin+${k * 3 / num}s` : '0s';
                let color = `#${Math.random().toString(16).substring(2,8)}a0`;
                circlecode += `<circle id="cc${c}" cx="100" cy="100" r="0" stroke="${color}" transform="rotate(${360 / num * k} 100 100)"></circle>`;
                anicode += `<animate xlink:href="#cc${c}" attributeName="r" values="0;90;0" dur="20s" repeatCount="indefinite" id="ani${c}" begin="${bstr}"></animate>`;
      });
      return circlecode + anicode;
};
svg1.innerHTML = drawCircles(10);
observer.observe(mydiv);
aud.onplaying = aud.onpause = () => aud.paused ? svg1.pauseAnimations() : svg1.unpauseAnimations();
svg1.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

梦油 发表于 2024-9-13 14:54

你学得真快，学以致用啊。

红影 发表于 2024-9-13 15:39

这底图还是自己做的动图呢，真漂亮。套圈小播也用得漂亮。
欣赏江南好帖{:4_199:}

梦江南 发表于 2024-9-13 17:15

梦油 发表于 2024-9-13 14:54
你学得真快，学以致用啊。

惭愧啦，是套用黑黑老师的代码。谢谢！

梦江南 发表于 2024-9-13 17:17

红影 发表于 2024-9-13 15:39
这底图还是自己做的动图呢，真漂亮。套圈小播也用得漂亮。
欣赏江南好帖

就是做了张底图，纯碎是套用黑黑老师的代码。惭愧！

梦油 发表于 2024-9-13 17:51

梦江南 发表于 2024-9-13 17:15
惭愧啦，是套用黑黑老师的代码。谢谢！

学得快表明你聪明啊。

小辣椒 发表于 2024-9-13 19:29

欣赏梦江南的精彩作业{:4_199:}

红影 发表于 2024-9-13 20:12

梦江南 发表于 2024-9-13 17:17
就是做了张底图，纯碎是套用黑黑老师的代码。惭愧！

做得漂亮就好呢，这有什么{:4_187:}

起个网名好难 发表于 2024-9-13 20:49

https://image.xcar.com.cn/attachments/a/day_140705/2014070517_99f5aaf8d37210bddc98m9YRVSpZ6b07.gif

梦江南 发表于 2024-9-14 09:47

梦油 发表于 2024-9-13 17:51
学得快表明你聪明啊。

这都是黑黑老师的功劳啊！

梦江南 发表于 2024-9-14 09:50

小辣椒 发表于 2024-9-13 19:29
欣赏梦江南的精彩作业

问好小辣椒，感冒好了吗？记得要多休息哦！https://pic.imgdb.cn/item/667a6fa3d9c307b7e9452ec5.gif

梦江南 发表于 2024-9-14 09:52

红影 发表于 2024-9-13 20:12
做得漂亮就好呢，这有什么

您总是鼓励我‘，帮助我，我很感动，有您真好！https://pic.imgdb.cn/item/666a6741d9c307b7e9aa2b68.gif

梦江南 发表于 2024-9-14 09:53

起个网名好难 发表于 2024-9-13 20:49


这么起劲，别把手掌拍红了。{:4_173:}

起个网名好难 发表于 2024-9-14 09:59

梦江南 发表于 2024-9-14 09:53
这么起劲，别把手掌拍红了。

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

梦江南 发表于 2024-9-14 10:07

起个网名好难 发表于 2024-9-14 09:59


{:4_173:}{:4_173:}刚从网上搜来的？

起个网名好难 发表于 2024-9-14 10:51

梦江南 发表于 2024-9-14 10:07
刚从网上搜来的？

https://www.sohu.com/a/234752691_754328

梦江南 发表于 2024-9-14 11:16

起个网名好难 发表于 2024-9-14 10:51
https://www.sohu.com/a/234752691_754328

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

梦油 发表于 2024-9-14 13:18

梦江南 发表于 2024-9-14 09:47
这都是黑黑老师的功劳啊！

对，老师的功劳。

小辣椒 发表于 2024-9-14 14:29

梦江南 发表于 2024-9-14 09:50
问好小辣椒，感冒好了吗？记得要多休息哦！

谢谢梦江南的关心，退烧了，只是还是人没有力气，后面中秋节可以再休息几天了

梦江南 发表于 2024-9-14 17:19

梦油 发表于 2024-9-14 13:18
对，老师的功劳。

有老师的辛苦付出和无私奉献，学生才有学习的机会。

查看完整版本: 梦幻岛 套用黑黑老师的大河之舞代码