Kalos Eidos
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/kalos.webp') no-repeat center/cover; }
#progress { position: absolute; bottom: 40px; width: 15vw; height: 15vw; transition: .4s; }
#prog, #track { fill: none; stroke: url(#grd1); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke: snow; }
#g1 { animation: unset; cursor: pointer; }
#btnFs { bottom: 20px; color: snow; border-color: currentColor!important; }
.circle { transform-box: fill-box; transform-origin: center; fill: transparent; stroke: url(#grd1); stroke-width: 10; stroke-opacity: .7; animation: rot var(--duration) linear infinite var(--state); }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28483419" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/14/64/5e593f4b8ab37.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1" class="sepia"><title>ALT+X</title></g>
<g id="g2"><title>调节进度</title></g>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
var dr = Dr.dr(progress);
var rs = [{cx: -100, cy: -100}, {cx: 0,cy: 0}, {cx: 100, cy: -100}];
var grdSet = {id: 'grd1', x1: 0, x2: 0, y1: 0, y2: 1};
var stopAr = [['red',0], ['green',.5], ['orange',1]];
dr.gradient('linearGradient', grdSet, stopAr);
rs.forEach((r,k) => {
var du = ((Math.random() * 20 + 20) / 10).toFixed(2);
dr.circle(r.cx, r.cy, 90).sets({class: 'circle', style: `--duration: ${du}s`}).addTo(g1);
});
dr.path('M-190 0 Q0 300,190 0').id('track').addTo(g2);
dr.path('M-190 0 Q0 300,190 0').id('prog').addTo(g2);
FS(pa, g1);
</script> <div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/kalos.webp') no-repeat center/cover; }
#progress { position: absolute; bottom: 40px; width: 15vw; height: 15vw; transition: .4s; }
#prog, #track { fill: none; stroke: url(#grd1); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke: snow; }
#g1 { animation: unset; cursor: pointer; }
#btnFs { bottom: 20px; color: snow; border-color: currentColor!important; }
.circle { transform-box: fill-box; transform-origin: center; fill: transparent; stroke: url(#grd1); stroke-width: 10; stroke-opacity: .7; animation: rot var(--duration) linear infinite var(--state); }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28483419" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/14/64/5e593f4b8ab37.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1" class="sepia"><title>ALT+X</title></g>
<g id="g2"><title>调节进度</title></g>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
var dr = Dr.dr(progress);
var rs = [{cx: -100, cy: -100}, {cx: 0,cy: 0}, {cx: 100, cy: -100}];
var grdSet = {id: 'grd1', x1: 0, x2: 0, y1: 0, y2: 1};
var stopAr = [['red',0], ['green',.5], ['orange',1]];
dr.gradient('linearGradient', grdSet, stopAr);
rs.forEach((r,k) => {
var du = ((Math.random() * 20 + 20) / 10).toFixed(2);
dr.circle(r.cx, r.cy, 90).sets({class: 'circle', style: `--duration: ${du}s`}).addTo(g1);
});
dr.path('M-190 0 Q0 300,190 0').id('track').addTo(g2);
dr.path('M-190 0 Q0 300,190 0').id('prog').addTo(g2);
FS(pa, g1);
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 小播三个圆
先使用一个数组变量 rs 用以记录三个圆的圆心设定：
var rs = [
{cx: -100, cy: -100},
{cx: 0,cy: 0},
{cx: 100, cy: -100}
];
然后遍历该数组的数组元素，画出三个圆（代码 31~33）。圆都指定 class 类，对应 CSS 设计的 .circle {} 选择器，该类指定了使用渐变描边。圆需要加入 g1 分组，通过对 g1 的点击实现音频播放暂停交互。
进度条
用极简的二次贝塞尔路径绘制两个圆弧形状。CSS中，底轨 track 使用渐变描边（代码第 5 行），进度指示prog 使用 snow 做进度指示 颜色（代码第 6 行）。 黑黑老师又出新作品了。辛苦了！{:4_187:} 梦江南 发表于 2025-9-23 09:24
黑黑老师又出新作品了。辛苦了！
{:4_190:} 这个有趣，因为设置了不同颜色，圆的转动才看得出来。而且因为不同颜色，让这些转动看着像是在闪动一般，真神奇{:4_187:} 三个圆的转动还有一定的滞后性，让三个小圆更有趣了。
这背景很神奇，建筑里的人物都是剪影呢。 红影 发表于 2025-9-23 14:54
三个圆的转动还有一定的滞后性，让三个小圆更有趣了。
这背景很神奇，建筑里的人物都是剪影呢。
三个圆运行关键帧动画的总时长不同，随机设定，2~4秒之间 红影 发表于 2025-9-23 14:50
这个有趣，因为设置了不同颜色，圆的转动才看得出来。而且因为不同颜色，让这些转动看着像是在闪动一般，真 ...
漂亮的吧 马黑黑 发表于 2025-9-23 08:00
小播三个圆
先使用一个数组变量 rs 用以记录三个圆的圆心设定：
这小播的设计越来越神秘了。。。
三个圆转得并不同步，色彩变化更丰富。。
今天的JS代码烧脑，以后再细细理解。。
这个小杜头一次看到。。--duration: ${du}s
计算方法也好玩。为何用了20还要除以10得到2，不直接用2呢{:4_173:} 音乐好玩，开始若有似无的，几不可闻。。 花飞飞 发表于 2025-9-23 19:35
音乐好玩，开始若有似无的，几不可闻。。
是不是觉得链接失效啦{:4_170:} 马黑黑 发表于 2025-9-23 19:39
是不是觉得链接失效啦
人家进度条还走着呢。。信号肉眼可见。。{:4_173:} 花飞飞 发表于 2025-9-23 19:31
今天的JS代码烧脑，以后再细细理解。。
这个小杜头一次看到。。--duration: ${du}s
计算方法也好玩。为何 ...
--duration 是一个 CSS 变量，这里指代 animation-duration，即圆运行关键帧动画 rotate 的总时长；这个变量的值在JS中运算，Math.random() * 20 + 20 将得到 20~40 之间的浮点数，但希望它是 2~4秒，所以除以10，并且不希望有太多的小数点，所以用上里 toFixed(2) 来限制它——只要小数点后面的两位数。 花飞飞 发表于 2025-9-23 19:27
这小播的设计越来越神秘了。。。
三个圆转得并不同步，色彩变化更丰富。。
还过得去 花飞飞 发表于 2025-9-23 19:43
人家进度条还走着呢。。信号肉眼可见。。
酱紫 马黑黑 发表于 2025-9-23 19:44
--duration 是一个 CSS 变量，这里指代 animation-duration，即圆运行关键帧动画 rotate 的总时长；这个 ...
我的天，一个计算公式有这么多的考虑。。你这是多核电脑吧。。。{:4_173:}
还精确到小数点后两位，那它们的时间差异的机率更大，更不容易同步了。。 马黑黑 发表于 2025-9-23 19:44
还过得去
思路很漂亮{:4_170:} 马黑黑 发表于 2025-9-23 19:45
酱紫
如果没链接也正常，现在管控这么严。。再说你的歌多是冷门，除了那首回家。比较热