格拉斯微风

马黑黑

马黑黑

<style> @import 'https://638183.freep.cn/638183/web/css/tz01.css'; #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w4/gls.webp') no-repeat center/cover; --ma-size: 15%; } #btnFs { left: 30px; bottom: 20px; color: skyblue; border-color: currentColor!important; } #prog { position: absolute; cursor: pointer; opacity: 0.7; bottom: 20px; width: var(--ma-size); } #ma { bottom: 50px; border-radius: 50%; } #msvg rect { transform-box: fill-box; transform-origin: center; animation: rotate 4s var(--delay) linear infinite var(--state); } </style> <div id="pa"> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2156516185" autoplay loop></audio> <video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/01/92/5b4de2164e31e.mp4" autoplay loop muted></video> <progress id="prog"></progress> <div id="ma"><svg id="msvg" width="100%" height="100%" viewBox="-200 -200 400 400"></svg></div> </div> <script type="module"> import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js'; import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js'; var dr = Dr.dr(msvg); dr.defs('defs'); dr.g('g1').addTo('defs'); dr.polyline('0 0,0 150', 'none', 'cyan', 3).addTo('#g1'); dr.rect(-20, 150, 40, 40, 'skyblue').addTo('#g1'); var tt = 12; Array.from({length: tt}).forEach((_,k) => { dr.use('#g1', 0, 0).transform(`rotate(${360/tt*k})`).style(`--delay: ${Math.random() * -4}s`); }); aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration; aud.onplaying = aud.onpause = () => msvg.style.setProperty('--state', aud.paused ? 'paused' : 'running'); prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth; FS(pa, ma); </script>

花飞飞

标题好诗意啊。。。一下子就被吸引过来了。。
女声吟唱也特别好听。。。空灵婉转。。
这个小播除了整体旋转，四周的小方块也自己会转，与之前的都不相同。。

花飞飞

还加了纯粹的进度条，功能更强了。。。可以任意选择歌曲位置。。
画面漂亮，在水车驱动之下，水灌到天上去了
现在看看代码。。

花飞飞

width: var(--ma-size);进度条的宽度给了个变量，根据贴子的宽度自适应。。
border-radius: 50%; 在小播处又设了个圆形，是为保证触碰范围

#msvg rect { transform-box: fill-box; transform-origin: center; animation: rotate 4s var(--delay) linear infinite var(--state); }这句跟画的小播有关吧，动作设置，先没看懂。。等会看看下面的再回来瞅瞅

马黑黑

花飞飞 发表于 2025-9-5 19:13
标题好诗意啊。。。一下子就被吸引过来了。。
女声吟唱也特别好听。。。空灵婉转。。
这个小播除了整体旋 ...

有一点点小变化

马黑黑

花飞飞 发表于 2025-9-5 19:15
还加了纯粹的进度条，功能更强了。。。可以任意选择歌曲位置。。
画面漂亮，在水车驱动之下，水灌到天上去 ...

这可是纳米水车

花飞飞

22-26行咋看这么眼熟呢。。画笔开画的节奏。。。。
老巢最近打不开，不然可以去查查。。

dr.polyline('0 0,0 150', 'none', 'cyan', 3).addTo('#g1');这是画了一条150的线，青色，宽度为3...
dr.rect(-20, 150, 40, 40, 'skyblue').addTo('#g1');这个应该是小方块了，但这数据看不懂了。。哪开始哪结束，烧脑的。。。天蓝色。。

上楼里那一句应该是针对小方块的设置和动作吧。。

马黑黑

花飞飞 发表于 2025-9-5 19:23
width: var(--ma-size);进度条的宽度给了个变量，根据贴子的宽度自适应。。
border-radius: 50%; 在小播 ...

这是小矩形旋转的关键：

针对 svg 内的元素，它们转换（transform）运动如旋转等的原点都是svg的坐标点 {0, 0} 或 viewBox 所设置的坐标点，svg内的子元素要能像HTML元素那样一自己的中心为转换原点的话，需要：

一、设置 transform-box  为 fill-box;
二、设置 transiform-origin 为 center；

二者相互配套，缺一不可。

要不然，这些小矩形就会像上一帖的粒子那样做奇怪的运动

马黑黑

花飞飞 发表于 2025-9-5 19:29
22-26行咋看这么眼熟呢。。画笔开画的节奏。。。。
老巢最近打不开，不然可以去查查。。

现在都9.5了，服务器还不开工吗

花飞飞

一线一矩重复旋转12次，构成现在的图案，
Array.from({length: tt}).forEach((_,k) => {
                dr.use('#g1', 0, 0).transform(`rotate(${360/tt*k})`).style(`--delay: ${Math.random() * -4}s`);
这句封神的又来了。。
每个角度是按数量自动计算的。。可以随意设定数量
延时从-4到0之时随机，理论上那就不是整齐划一？虽然肉眼看上去很整齐

花飞飞

马黑黑 发表于 2025-9-5 19:36
现在都9.5了，服务器还不开工吗

我一会去问问吧，搞不清楚

花飞飞

马黑黑 发表于 2025-9-5 19:26
有一点点小变化

嗯，你的小坦克边走可以边打击敌人了

花飞飞

马黑黑 发表于 2025-9-5 19:26
这可是纳米水车

体量小，能量大

马黑黑

花飞飞 发表于 2025-9-5 19:42
嗯，你的小坦克边走可以边打击敌人了

这个随便

马黑黑

花飞飞 发表于 2025-9-5 19:41
我一会去问问吧，搞不清楚

理论上这不是个难题

杨帆

漂亮！谢谢老师经典分享

马黑黑

花飞飞 发表于 2025-9-5 19:37
一线一矩重复旋转12次，构成现在的图案，
Array.from({length: tt}).forEach((_,k) => {
                dr.use('#g1', ...

理论上小矩形的旋转肉眼不太容易分辨出来

马黑黑

花飞飞 发表于 2025-9-5 19:43
体量小，能量大

杠杠的

马黑黑

杨帆 发表于 2025-9-5 19:45
漂亮！谢谢老师经典分享