黑暗时分
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/darkhours.webp') no-repeat center/cover; }
#progress { position: absolute; width: 15vw; height: 15vw; transition: .4s; }
#prog, #track { fill: none; stroke: url(#lGrd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke: lightblue; stroke-opacity: .4; }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); 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=413961014" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/01/74/5b4971fc323af.mp4" autoplay loop muted></video>
<svg id="progress" class="hue-rotate" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<defs>
<linearGradient id="lGrd" gradientTransform="rotate(30)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<g id="g1" class="brightness"><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.ellipse(0, 0, 140, 70,'transparent','url(#lGrd)',10).addTo(g1).rotates(5,180);
dr.circle(0,0,180).id('track').addTo(g2);
dr.circle(0,0,180).id('prog').addTo(g2);
FS(pa, g1);
</script> <div class="codebox" data-prev="1">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/darkhours.webp') no-repeat center/cover; }
#progress { position: absolute; width: 15vw; height: 15vw; transition: .4s; }
#prog, #track { fill: none; stroke: url(#lGrd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke: lightblue; stroke-opacity: .4; }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); 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=413961014" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/01/74/5b4971fc323af.mp4" autoplay loop muted></video>
<svg id="progress" class="hue-rotate" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<defs>
<linearGradient id="lGrd" gradientTransform="rotate(30)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<g id="g1" class="brightness"><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.ellipse(0, 0, 140, 70,'transparent','url(#lGrd)',10).addTo(g1).rotates(5,180);
dr.circle(0,0,180).id('track').addTo(g2);
dr.circle(0,0,180).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> 本帖小播：
（一）大圆做进度条、5个椭圆做播放/暂停控制器；
（二）使用线性渐变描边：在svg中创建简单的线性渐变（代码 15~20行），在CSS对应的选择器通过 stroke: url(#渐变ID) 指定使用svg创建的渐变描边（代码第 5 行、第 7 行），也可在 svgdr 中指定。 音乐原名 Dark Hours，可理解为黑暗时刻、黑暗时分 第一次看到黑黑老师用黑屏做帖。{:4_187:} 梦江南 发表于 2025-9-21 09:03
第一次看到黑黑老师用黑屏做帖。
用的不少的 绘制的小播和进度条都使用了设置好的渐变方式，两者相互呼应，真漂亮{:4_199:} 这视频好看，从黑暗中迸发出的能量{:4_187:} 红影 发表于 2025-9-21 10:28
这视频好看，从黑暗中迸发出的能量
视频确实很好 红影 发表于 2025-9-21 10:24
绘制的小播和进度条都使用了设置好的渐变方式，两者相互呼应，真漂亮
渐变带来惊喜。
今天休息，等下升级一下 svgdr 的 gradient 指令，让 stop 标签的创建能接收参数，而不仅仅是原来的只能接收字符串参数，这样会更方便创建svg渐变。 音画唯美 制作大气，太棒了！
谢谢马黑黑带来的精彩～！辛苦了！ 偶然~ 发表于 2025-9-21 11:22
制作大气，太棒了！
{:4_190:} 制作唯美，效果惊艳，谢谢马老师精彩示范{:4_191:} url(#lGrd)这个渐变贯穿始终，小播和进度条的颜色都进行了调用。。
5金95红渐变同时进行了30度的旋转。。
这样的色彩设置，令小播和进度条更加梦幻，比单一色彩漂亮多了。。{:4_173:} 马黑黑 发表于 2025-9-21 07:56
音乐原名 Dark Hours，可理解为黑暗时刻、黑暗时分
背景暗色，小播靓色，色彩对比强烈，效果明显。。
音乐好听。恢宏大气，旋律激昂。。 花飞飞 发表于 2025-9-21 19:03
背景暗色，小播靓色，色彩对比强烈，效果明显。。
音乐好听。恢宏大气，旋律激昂。。
矮油，老是说辣么好听的话{:4_170:} 花飞飞 发表于 2025-9-21 19:01
url(#lGrd)这个渐变贯穿始终，小播和进度条的颜色都进行了调用。。
5金95红渐变同时进行了30度的旋转。。
...
单一色彩其实也挺好，不要见异思迁{:4_170:} 马黑黑 发表于 2025-9-21 10:44
视频确实很好
和小播相互映衬，真好{:4_187:}