格拉斯微风
本帖最后由 马黑黑 于 2025-9-5 18:18 编辑 <br /><br /><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> <div class="codebox">
<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>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 标题好诗意啊。。。一下子就被吸引过来了。。
女声吟唱也特别好听。。。空灵婉转。。
这个小播除了整体旋转，四周的小方块也自己会转，与之前的都不相同。。{:4_199:} 还加了纯粹的进度条，功能更强了。。。可以任意选择歌曲位置。。
画面漂亮，在水车驱动之下，水灌到天上去了
现在看看代码。。{:4_173:} 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); }这句跟画的小播有关吧，动作设置，先没看懂。。等会看看下面的再回来瞅瞅{:4_170:} 花飞飞 发表于 2025-9-5 19:13
标题好诗意啊。。。一下子就被吸引过来了。。
女声吟唱也特别好听。。。空灵婉转。。
这个小播除了整体旋 ...
有一点点小变化 花飞飞 发表于 2025-9-5 19:15
还加了纯粹的进度条，功能更强了。。。可以任意选择歌曲位置。。
画面漂亮，在水车驱动之下，水灌到天上去 ...
这可是纳米水车{:4_170:} 22-26行咋看这么眼熟呢。。画笔开画的节奏。。。。
老巢最近打不开，不然可以去查查。。{:4_173:}
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；
二者相互配套，缺一不可。
要不然，这些小矩形就会像上一帖的粒子那样做奇怪的运动{:4_170:} 花飞飞 发表于 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之时随机，理论上那就不是整齐划一？虽然肉眼看上去很整齐{:4_170:} 马黑黑 发表于 2025-9-5 19:36
现在都9.5了，服务器还不开工吗
我一会去问问吧，搞不清楚{:4_173:} 马黑黑 发表于 2025-9-5 19:26
有一点点小变化
嗯，你的小坦克边走可以边打击敌人了{:4_173:} 马黑黑 发表于 2025-9-5 19:26
这可是纳米水车
体量小，能量大{:4_173:} 花飞飞 发表于 2025-9-5 19:42
嗯，你的小坦克边走可以边打击敌人了
这个随便 花飞飞 发表于 2025-9-5 19:41
我一会去问问吧，搞不清楚
理论上这不是个难题 漂亮！谢谢老师经典分享{:4_191:} 花飞飞 发表于 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
漂亮！谢谢老师经典分享
{:4_191:}