泛用型自动化解决方案0.3.2.9f2
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/9f2.webp') no-repeat center/cover; }
#progress { position: absolute; width: 240px; height: 240px; right: 20px; top: 20px; }
#prog, #track { fill: none; stroke: lightgreen; stroke-width: 10; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke-opacity: 1; }
#player { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: transparent; stroke: lightgreen; stroke-width: 8px; animation: rotate 8s linear infinite var(--state); }
#btnFs { right: 20px; bottom: 20px; color: silver; border-color: currentColor!important; }
@keyframes move { to { stroke-dashoffset: 0; } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1371757759" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2430062/00/11/05/5d834fa0992c6.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<g id="player">
<title>ALT+X</title>
<path d="M390 200L334.35 334.35 L200 390 L65.65 334.35 L10 200 L65.65 65.65 L200 10 L334.35 65.65 L390 200"></path>
<path d="M350 200L306.07 306.07 L200 350 L93.93 306.07 L50 200 L93.93 93.93 L200 50 L306.07 93.93 L350 200"></path>
</g>
<circle id="track" cx="200" cy="200" r="60"><title>调节进度</title></circle>
<circle id="prog" cx="200" cy="200" r="60"><title>调节进度</title></circle>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
FS(pa, player);
</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/9f2.webp') no-repeat center/cover; }
#progress { position: absolute; width: 240px; height: 240px; right: 20px; top: 20px; }
#prog, #track { fill: none; stroke: lightgreen; stroke-width: 10; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke-opacity: 1; }
#player { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: transparent; stroke: lightgreen; stroke-width: 8px; animation: rotate 8s linear infinite var(--state); }
#btnFs { right: 20px; bottom: 20px; color: silver; border-color: currentColor!important; }
@keyframes move { to { stroke-dashoffset: 0; } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1371757759" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2430062/00/11/05/5d834fa0992c6.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<g id="player">
<title>ALT+X</title>
<path d="M390 200L334.35 334.35 L200 390 L65.65 334.35 L10 200 L65.65 65.65 L200 10 L334.35 65.65 L390 200"></path>
<path d="M350 200L306.07 306.07 L200 350 L93.93 306.07 L50 200 L93.93 93.93 L200 50 L306.07 93.93 L350 200"></path>
</g>
<circle id="track" cx="200" cy="200" r="60"><title>调节进度</title></circle>
<circle id="prog" cx="200" cy="200" r="60"><title>调节进度</title></circle>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
FS(pa, player);
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 进度控制部分也可以使用g分组，若此，则只需一个 <title> 标签显示提示语 通过svg将小播、进度控制集成在一起是个不错的主意，有两点需要注意：
其一：注意小播和进度条的层级关系——进度控制部件应浮于小播上方，可以利用HTML代码流出现次序的叠加规则即后来者居上加以实现，也可通过CSS属性 z-index 设置；
其二：小播需要考虑接受点击的面积，特别是，当 fill 设置为 none 时，stroke 或stroke 交叉 的区域足够大且稳定，或者，可以的话，像本帖那样设置 fill 为 transparent 透明色。none 表示没有填充色，fill 的区域无法接受点击，transparent 是透明色，透明色也是颜色，用它填充的 fill 区域可以接受点击。 本帖标题 泛用型自动化解决方案0.3.2.9f2 为音乐名称 黑黑老师的这个进度条是里面的小圆啊，外面是小播，漂亮！ 马黑黑 发表于 2025-9-15 08:00
通过svg将小播、进度控制集成在一起是个不错的主意，有两点需要注意：
其一：注意小播和进度条的层级关 ...
这个点击暂停的区域足够大的了，但是调整进度时，鼠标稍微歪一下就变控制暂停去了。
这两者其实还是有点矛盾的{:4_204:} 原来可以画两个图形共同作为小播的。这设计很漂亮，包括进度条，组成了漂亮的一个组合{:4_187:} 马黑黑 发表于 2025-9-15 08:01
本帖标题 泛用型自动化解决方案0.3.2.9f2 为音乐名称
是因为这个音乐就叫这名么？{:4_203:} 泛用型自动化解决方案（指让所有工具人猛烈加班如同机器）
果然这音乐就叫这名字，很神奇啊。
“随着一阵风，博士在五个干员头上拍了一下。当所有干员反应过来之后，博士已经到下一层楼了” 红影 发表于 2025-9-15 19:06
泛用型自动化解决方案（指让所有工具人猛烈加班如同机器）
果然这音乐就叫这名字，很神奇啊。
{:4_173:} 红影 发表于 2025-9-15 19:04
是因为这个音乐就叫这名么？
{:4_181:} 红影 发表于 2025-9-15 19:03
原来可以画两个图形共同作为小播的。这设计很漂亮，包括进度条，组成了漂亮的一个组合
{:4_170:} 红影 发表于 2025-9-15 19:01
这个点击暂停的区域足够大的了，但是调整进度时，鼠标稍微歪一下就变控制暂停去了。
这两者其实还是有点 ...
你是用PS的时候经常按歪吗{:4_189:} 马黑黑 发表于 2025-9-15 08:01
本帖标题 泛用型自动化解决方案0.3.2.9f2 为音乐名称
如此机械风的名称，从里到外都透着金属光泽{:4_173:}
刚看到的时候莫明了一下，这是什么自动化方案。。 梦江南 发表于 2025-9-15 09:47
黑黑老师的这个进度条是里面的小圆啊，外面是小播，漂亮！
{:4_190:} 花飞飞 发表于 2025-9-15 19:43
如此机械风的名称，从里到外都透着金属光泽
刚看到的时候莫明了一下，这是什么自动化方案。。
方案不是俺写的{:4_170:} 大小两个八边形当小播，看代码跟一个太阳花图案还是有所差别的。。
太阳花是不也可以整两个叠在一起{:4_173:}那可就更复杂了。
马黑黑 发表于 2025-9-15 19:44
方案不是俺写的
感觉你就是天天在写方案的人，特别是自动化运作{:4_173:} 花飞飞 发表于 2025-9-15 19:48
感觉你就是天天在写方案的人，特别是自动化运作
没有没有，没这个能力