绿叶清舟 发表于 2024-9-13 11:37

梦江南TO梦江南


<style>
#mydiv { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/66e3ad98d9c307b7e9403dc3.jpg') center/cover; box-shadow: 03px 3px 6px #333; display: grid; place-items: center; position: relative; }
#svg1 { position: absolute; top: 26%; left: 46%; cursor: pointer; filter: hue-rotate(0deg) drop-shadow(0 0 4px black); transition: 1s; mix-blend-mode: saturation; }
#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=247699" autoplay loop></audio>
      <svg id="svg1" width="200" height="200" viewBox="0 0 200 200" fill="none" stroke="white" stroke-width="4" 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 13:31

绿叶清舟老师这帖是给我的吗？

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

我太开心了！谢谢绿叶清舟老师！{:4_204:}

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

群众评议推陈出新，把梦江南送给了梦江南。

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

这层层叠叠的圆环播放器用在这里真漂亮。欣赏清舟好帖，梦江南收礼开心{:4_187:}

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

还有这样的歌曲啊，正好送江南了{:4_173:}

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

清舟这个还是同一颜色的，不是变色的呢{:4_204:}

小辣椒 发表于 2024-9-13 22:26

清舟这个也是黑黑的作业帖？现在小辣椒都不清楚那个教程了

绿叶清舟 发表于 2024-9-14 20:02

小辣椒 发表于 2024-9-13 22:26
清舟这个也是黑黑的作业帖？现在小辣椒都不清楚那个教程了

这个不是作业的了，马黑的大河之舞的代码了

绿叶清舟 发表于 2024-9-14 20:02

红影 发表于 2024-9-13 15:28
清舟这个还是同一颜色的，不是变色的呢

也没想到加了滤镜色 变成一样的了

绿叶清舟 发表于 2024-9-14 20:03

梦江南 发表于 2024-9-13 13:31
绿叶清舟老师这帖是给我的吗？

这个曲子非你莫属了

绿叶清舟 发表于 2024-9-14 20:04

梦江南 发表于 2024-9-13 13:33
我太开心了！谢谢绿叶清舟老师！

不客气了，听音乐时看到这曲名想到你了

绿叶清舟 发表于 2024-9-14 20:04

梦油 发表于 2024-9-13 14:53
群众评议推陈出新，把梦江南送给了梦江南。

自己给自己吧{:4_173:}

红影 发表于 2024-9-14 22:06

绿叶清舟 发表于 2024-9-14 20:02
也没想到加了滤镜色 变成一样的了
这个真的很出乎意料呢。还以为JS里调整才可以。

梦江南 发表于 2024-9-15 07:46

绿叶清舟 发表于 2024-9-14 20:03
这个曲子非你莫属了

很喜欢这歌曲，好开心！{:4_187:}

梦江南 发表于 2024-9-15 07:48

绿叶清舟 发表于 2024-9-14 20:04
不客气了，听音乐时看到这曲名想到你了

您真好，听着音乐我醉了！

梦油 发表于 2024-9-15 14:16

绿叶清舟 发表于 2024-9-14 20:04
自己给自己吧

你可真是脑洞大开，好聪明啊！
页: [1]
查看完整版本: 梦江南TO梦江南