Sun Mother
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/sunma.webp') no-repeat center/cover; }
#progress { position: absolute; right: 20px; top: 0; width: 15vw; height: 15vw; transition: .4s; }
#prog, #track { fill: none; stroke: red; stroke-width: 16; stroke-opacity: .4; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke-opacity: .8; }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#rGrd); animation: rotate 8s linear infinite var(--state); }
#btnFs { bottom: 20px; color: tan; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1355146597" 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);
dr.gradient('radialGradient', {id: 'rGrd'}, [['red',0],['yellow',.25],['red',.9]]);
dr.path('M-10 0,L-70 -150,Q0 -100,70 -150,L10 0').addTo(g1).rotates(5);
dr.line(-150,190,150,190).id('track').addTo(g2);
dr.line(-150,190,150,190).id('prog').addTo(g2);
FS(pa, g1);
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/sunma.webp') no-repeat center/cover; }
#progress { position: absolute; right: 20px; top: 0; width: 15vw; height: 15vw; transition: .4s; }
#prog, #track { fill: none; stroke: red; stroke-width: 16; stroke-opacity: .4; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke-opacity: .8; }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#rGrd); animation: rotate 8s linear infinite var(--state); }
#btnFs { bottom: 20px; color: tan; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1355146597" 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);
dr.gradient('radialGradient', {id: 'rGrd'}, [['red',0],['yellow',.25],['red',.9]]);
dr.path('M-10 0,L-70 -150,Q0 -100,70 -150,L10 0').addTo(g1).rotates(5);
dr.line(-150,190,150,190).id('track').addTo(g2);
dr.line(-150,190,150,190).id('prog').addTo(g2);
FS(pa, g1);
</script>
灰常入心的歌曲，俺来沉浸式享听。。{:4_174:} 原来小播的图案就径向渐变来的，很奇妙的设计，代码十分简洁，是黑黑升级后的版本呢{:4_199:} {id: 'rGrd'}和css里的对应，颜色就被设定上去了呢{:4_187:} 红影 发表于 2025-9-22 15:42
{id: 'rGrd'}和css里的对应，颜色就被设定上去了呢
这是 svgdr 在使用指令操纵 svg 的相应标签 的 id，渐变标签有一个 id。svg渐变约定：渐变元素需要一个 id 标识以便 fill 和 stroke 的着色行为可以通过 url(#id) 使用它。 红影 发表于 2025-9-22 15:22
原来小播的图案就径向渐变来的，很奇妙的设计，代码十分简洁，是黑黑升级后的版本呢
升不升级都能实现这类功能，升级的意义主要在于令指令的下达更简洁或可以有多种下达方式。 樵歌 发表于 2025-9-22 13:07
灰常入心的歌曲，俺来沉浸式享听。。
{:4_180:} 马黑黑 发表于 2025-9-22 18:24
换个{:4_176:} 樵歌 发表于 2025-9-22 19:44
换个
你好色呀{:4_170:} 感觉这个小播又是闭着眼画的，{:4_170:}形状好看，色彩鲜艳。。。
里面还有天眼在无时无刻巡视。。
特别棒的效果。。 径向渐变填充，能形成这样奇妙的圆形装饰，跟天珠一样，真是神来一笔，开始还想这中间的圆是怎么画的。。就是渐变时红开头，黄至.25，其余到.9，渐变特别自然。。。{:4_173:} 这个背景漂亮，金色的粒子光点飞舞。大自然的气息扑面而来。。。画面温馨。。
音乐舒缓，与之前风格不同，好听 花飞飞 发表于 2025-9-22 20:11
这个背景漂亮，金色的粒子光点飞舞。大自然的气息扑面而来。。。画面温馨。。
音乐舒缓，与之前风格不同， ...
风格差不多的 花飞飞 发表于 2025-9-22 20:07
径向渐变填充，能形成这样奇妙的圆形装饰，跟天珠一样，真是神来一笔，开始还想这中间的圆是怎么画的。。就 ...
一切可以尝试，如果不知道原理的话。知道原理，尝试起来会简单 花飞飞 发表于 2025-9-22 20:02
感觉这个小播又是闭着眼画的，形状好看，色彩鲜艳。。。
里面还有天眼在无时无刻巡视。。
特别 ...
谢谢鼓励 马黑黑 发表于 2025-9-22 20:47
谢谢鼓励
原来说实话这叫鼓励嘛。。。
拍砖我也不行啊，那是高手才能干的事。
我只有挨砖的份{:4_170:} 马黑黑 发表于 2025-9-22 20:47
一切可以尝试，如果不知道原理的话。知道原理，尝试起来会简单
现在知道了。。其实回家那贴也跟这个差不多，只不过被透明的和线条给吸引跑了。。{:4_173:} 马黑黑 发表于 2025-9-22 20:46
风格差不多的
同意同意，都是黑氏风格。。{:4_170:} 花飞飞 发表于 2025-9-22 21:05
现在知道了。。其实回家那贴也跟这个差不多，只不过被透明的和线条给吸引跑了。。
是的吧