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>

马黑黑

小播三个圆

先使用一个数组变量 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 行）。

梦江南

黑黑老师又出新作品了。辛苦了！

马黑黑

梦江南 发表于 2025-9-23 09:24
黑黑老师又出新作品了。辛苦了！

红影

这个有趣，因为设置了不同颜色，圆的转动才看得出来。而且因为不同颜色，让这些转动看着像是在闪动一般，真神奇

红影

三个圆的转动还有一定的滞后性，让三个小圆更有趣了。
这背景很神奇，建筑里的人物都是剪影呢。

马黑黑

红影 发表于 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呢

花飞飞

音乐好玩，开始若有似无的，几不可闻。。

马黑黑

花飞飞 发表于 2025-9-23 19:35
音乐好玩，开始若有似无的，几不可闻。。

是不是觉得链接失效啦

花飞飞

马黑黑 发表于 2025-9-23 19:39
是不是觉得链接失效啦

人家进度条还走着呢。。信号肉眼可见。。

马黑黑

花飞飞 发表于 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 的总时长；这个 ...

我的天，一个计算公式有这么多的考虑。。你这是多核电脑吧。。。
还精确到小数点后两位，那它们的时间差异的机率更大，更不容易同步了。。

花飞飞

马黑黑 发表于 2025-9-23 19:44
还过得去

思路很漂亮

花飞飞

马黑黑 发表于 2025-9-23 19:45
酱紫

如果没链接也正常，现在管控这么严。。再说你的歌多是冷门，除了那首回家。比较热