正道沧桑
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/csvd.webp') no-repeat center/cover; }
#progress { position: absolute; left: 20px; bottom: 20px; width: 15vw; height: 15vw; transition: .4s; }
#g1 { cursor: pointer; fill: url(#grd); fill-opacity: .8; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
#g2 { cursor: pointer; fill: none; stroke: url(#grd); stroke-width: 10; stroke-linecap: round; }
#prog { stroke: rgba(250,250,250,.6); }
#btnFs { left: 20px; top: 20px; color: white; border-color: currentColor !important; }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1447293713" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/60/76/6396ee8f4bdad.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('linearGradient', {id: 'grd'}, [['red',0],['orange',.5],['crimson',1]]);
var points = '0 -20,-60 -170,-20 -120,-10 -180,0 -130,10 -180,20 -120,60 -180,0 -20';
dr.polygon(points).addTo(g1).rotates(6, 360, 0, -20);
dr.circle(0, -20, 160, 'transparent').addTo(g1);
dr.path('M-160 110 Q0 240,160 110').id('track').addTo(g2);
dr.path('M-160 110 Q0 240,160 110').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/csvd.webp') no-repeat center/cover; }
#progress { position: absolute; left: 20px; bottom: 20px; width: 15vw; height: 15vw; transition: .4s; }
#g1 { cursor: pointer; fill: url(#grd); fill-opacity: .8; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
#g2 { cursor: pointer; fill: none; stroke: url(#grd); stroke-width: 10; stroke-linecap: round; }
#prog { stroke: rgba(250,250,250,.6); }
#btnFs { left: 20px; top: 20px; color: white; border-color: currentColor !important; }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1447293713" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/60/76/6396ee8f4bdad.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('linearGradient', {id: 'grd'}, [['red',0],['orange',.5],['crimson',1]]);
var points = '0 -20,-60 -170,-20 -120,-10 -180,0 -130,10 -180,20 -120,60 -180,0 -20';
dr.polygon(points).addTo(g1).rotates(6, 360, 0, -20);
dr.circle(0, -20, 160, 'transparent').addTo(g1);
dr.path('M-160 110 Q0 240,160 110').id('track').addTo(g2);
dr.path('M-160 110 Q0 240,160 110').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_173:}
这小播绘制得漂亮，色彩的设置也漂亮{:4_199:} 这里的是苏州的东方之门吧，号称大秋裤的建筑{:4_173:} 气场宏大，波澜壮阔{:4_178:} 樵歌 发表于 2025-9-25 17:25
气场宏大，波澜壮阔
{:4_180:} 梦江南 发表于 2025-9-25 13:53
又是一款新的播放器，漂亮！
{:4_190:} 红影 发表于 2025-9-25 15:15
还以为会是伞的实例呢，原来不是。
这小播绘制得漂亮，色彩的设置也漂亮
伞只是测试帖宝画着玩，不是设计成小播的 红影 发表于 2025-9-25 15:16
这里的是苏州的东方之门吧，号称大秋裤的建筑
不是你设计的大秋裤吧{:4_189:} 每天不同的小播形状设计。。
这次的渐变也不一样了，线性条状变化更符合小播尖尖角的样式。。
黄色和深红色的交替，即使去色后也能感受到深浅变化
每天一赞。。{:4_173:} dr.circle(0, -20, 160, 'transparent').addTo(g1);
这个透明圆又出场了，有时候有有时候没有，难不成是通告排不开么。。{:4_173:} 花飞飞 发表于 2025-9-25 19:38
dr.circle(0, -20, 160, 'transparent').addTo(g1);
这个透明圆又出场了，有时候有有时候没有，难不成是通 ...
说过了的：它是协助小播点击的帮手。如果小播未使用填充色，它描边围起来的空间不会接受点击，如果用透明色 transparent 填充但彼此间有疏离也不方便点击，若是这种情形，可以引入一个圆或其它元素用透明色填充以增强分组的点击交互。 背景场面开阔，这视频找得太合适了，完美契合。。把远处{:4_173:}天地精华都展示出来了。。
音乐挺好听的，感觉用了好多乐器？
有些一部分声音是来捣乱的节奏 花飞飞 发表于 2025-9-25 19:43
背景场面开阔，这视频找得太合适了，完美契合。。把远处天地精华都展示出来了。。
音乐挺好听的 ...
电子音乐，这类音乐通常乐器效果很丰富 马黑黑 发表于 2025-9-25 19:42
说过了的：它是协助小播点击的帮手。如果小播未使用填充色，它描边围起来的空间不会接受点击，如果用透明 ...
是的，它一直在就好了。昨天的就没有用。。。其实不差一行代码{:4_173:}我也省得去想啥时候去掉它 马黑黑 发表于 2025-9-25 19:45
电子音乐，这类音乐通常乐器效果很丰富
有部分就是乱糟糟，难不成就是AI合成的。 花飞飞 发表于 2025-9-25 19:45
是的，它一直在就好了。昨天的就没有用。。。其实不差一行代码我也省得去想啥时候去掉它
用不用看情况。这好比请保姆：如果不需要，就没必要请，反之必须请。 花飞飞 发表于 2025-9-25 19:46
有部分就是乱糟糟，难不成就是AI合成的。
在AI盛行以前，电子音乐就是这个效果 马黑黑 发表于 2025-9-25 19:46
用不用看情况。这好比请保姆：如果不需要，就没必要请，反之必须请。
保姆没成本就让在家里呆着呗{:4_173:}反正不会捣乱