回家
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/hvjx.webp') no-repeat center/cover; }
#progress { position: absolute; width: 12vw; height: 12vw; bottom: 30px; transition: .4s; }
#prog, #track { fill: none; stroke: url(#grd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke: rgb(255,255,255); }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
#btnFs { right: 20px; top: 20px; color: cyan; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=25896403" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/22/5b52de8ec8111.mp4" autoplay loop muted></video>
<svg id="progress" class="hue-rotate" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<defs>
<radialGradient id="grd" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.75">
<stop offset="0%" stop-color="transparent"></stop>
<stop offset="70%" stop-color="red"></stop>
<stop offset="100" stop-color="lightgreen"></stop>
</radialGradient>
</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.path('M0 0 C200 -200,-200 -200,0 0Z').addTo('g1').rotates(5);
dr.path('M-180 0 A180 180 0 1 0 180 0').id('track').addTo('g2');
dr.path('M-180 0 A180 180 0 1 0 180 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: #ccc url('https://638183.freep.cn/638183/t24/w6/hvjx.webp') no-repeat center/cover; }
#progress { position: absolute; width: 12vw; height: 12vw; bottom: 30px; transition: .4s; }
#prog, #track { fill: none; stroke: url(#grd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke: rgb(255,255,255); }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
#btnFs { right: 20px; top: 20px; color: cyan; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=25896403" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/22/5b52de8ec8111.mp4" autoplay loop muted></video>
<svg id="progress" class="hue-rotate" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<defs>
<radialGradient id="grd" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.75">
<stop offset="0%" stop-color="transparent"></stop>
<stop offset="70%" stop-color="red"></stop>
<stop offset="100" stop-color="lightgreen"></stop>
</radialGradient>
</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.path('M0 0 C200 -200,-200 -200,0 0Z').addTo('g1').rotates(5);
dr.path('M-180 0 A180 180 0 1 0 180 0').id('track').addTo('g2');
dr.path('M-180 0 A180 180 0 1 0 180 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> 这小播的颜色好奇妙啊{:4_187:} 会变色的小播真漂亮。{:4_187:} 萨克斯“回家”真的是太好听了{:4_199:} 欣赏黑黑老师精美的播放器制作{:4_187:} 漂亮！谢谢马老师经典示范{:4_191:} 杨帆 发表于 2025-9-19 16:25
漂亮！谢谢马老师经典示范
{:4_190:} 菲儿 发表于 2025-9-19 15:59
欣赏黑黑老师精美的播放器制作
{:4_180:} 菲儿 发表于 2025-9-19 15:58
萨克斯“回家”真的是太好听了
{:4_181:} 红影 发表于 2025-9-19 13:22
这小播的颜色好奇妙啊
喝水{:4_190:} 梦江南 发表于 2025-9-19 13:44
会变色的小播真漂亮。
{:4_180:} 这个播放器路径也是可以彩色的，黑黑现在出帖速度杠杠的{:4_178:} 马黑黑 发表于 2025-9-19 18:02
喝水
进度条的颜色和小播也那么相配的呢{:4_199:} 这次的小播用径向渐变整出来的，透明、红色、绿色占比不同，深浅程度也不相同。。。
效果像是用彩色线条勾勒出的边框一样，层次分明，过渡又自然。。
营造出立体的感觉。。
加上触碰后色相的变化，这个新式小播迷S人了。。{:4_173:} 经典音乐，什么时候听来都悦耳。。。 花飞飞 发表于 2025-9-20 16:03
经典音乐，什么时候听来都悦耳。。。
喜悦的心情难以言表 花飞飞 发表于 2025-9-20 15:57
这次的小播用径向渐变整出来的，透明、红色、绿色占比不同，深浅程度也不相同。。。
效果像是用彩色线条勾 ...
新新人类一样{:4_170:} 红影 发表于 2025-9-19 23:21
进度条的颜色和小播也那么相配的呢
是不是呀 小辣椒 发表于 2025-9-19 23:08
这个播放器路径也是可以彩色的，黑黑现在出帖速度杠杠的
速度快是因为最近都赤脚{:4_170:}