献给风和大地
<style>@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/1164.webp') no-repeat center/cover; }
#progress { position: absolute; top: 15%; width: 10vw; height: 10vw; transition: .4s; }
#progress:hover { transform: scale(2); }
#g1 { cursor: pointer; fill: url(#grd); stroke: url('#grd'); stroke-width: 10; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
#g2 { cursor: pointer; fill: none; stroke: #ea9133; stroke-width: 10; stroke-linecap: round; }
#prog { stroke: url(#grd); }
#btnFs { bottom: 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=494642112" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/31/38/62d771d99618d.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1"><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.1';
var dr = Dr.dr(progress);
dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['red',0],['darkred',0.5],['plum',1]]);
dr.polygon('15 0,-50 110,50 140,15 0').addTo(g1).rotates(7);
dr.path('M190 0 A160 140 -30 0 1 -190 0 A160 140 -30 0 1 190 0').id('track').addTo(g2);
dr.path('M190 0 A160 140 -30 0 1 -190 0 A160 140 -30 0 1 190 0').id('prog').addTo(g2);
FS(pa, g1);
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/1164.webp') no-repeat center/cover; }
#progress { position: absolute; top: 15%; width: 10vw; height: 10vw; transition: .4s; }
#progress:hover { transform: scale(2); }
#g1 { cursor: pointer; fill: url(#grd); stroke: url('#grd'); stroke-width: 10; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
#g2 { cursor: pointer; fill: none; stroke: #ea9133; stroke-width: 10; stroke-linecap: round; }
#prog { stroke: url(#grd); }
#btnFs { bottom: 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=494642112" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/31/38/62d771d99618d.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1"><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.1';
var dr = Dr.dr(progress);
dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['red',0],['darkred',0.5],['plum',1]]);
dr.polygon('15 0,-50 110,50 140,15 0').addTo(g1).rotates(7);
dr.path('M190 0 A160 140 -30 0 1 -190 0 A160 140 -30 0 1 190 0').id('track').addTo(g2);
dr.path('M190 0 A160 140 -30 0 1 -190 0 A160 140 -30 0 1 190 0').id('prog').addTo(g2);
FS(pa, g1);
</script>
大气！ 那巨大的投影，像是来自太空。宏大！ 大气、漂亮！{:4_187:} 小文 发表于 2025-9-29 09:13
大气！
{:4_190:} 梦江南 发表于 2025-9-29 12:31
大气、漂亮！
{:4_190:} 樵歌 发表于 2025-9-29 12:10
那巨大的投影，像是来自太空。宏大！
{:4_180:} 马黑黑 发表于 2025-9-29 18:12
请{:4_176:} 樵歌 发表于 2025-9-29 19:38
请
{:4_206:} 小播的设计好漂亮，路径也很奇特，音乐好听{:4_199:} 红影 发表于 2025-9-29 22:30
小播的设计好漂亮，路径也很奇特，音乐好听
路径本来可以使用椭圆绘制指令直接画出来，这会更简单。但是，需要获取点击数据，旋转后需要额外的换算，就用 path 制作了。 挺好，缩放使得进度与控制的点击区域得到进一步区分{:4_199:} 杨帆 发表于 2025-9-30 00:49
挺好，缩放使得进度与控制的点击区域得到进一步区分
{:4_190:} 黑黑，精彩不断，速度太快了，神啊。。。。太厉害了，小辣椒每个作业都完成是不可能了{:4_198:} 每个播放器都有自己的特色{:4_199:} 小辣椒 发表于 2025-9-30 16:48
黑黑，精彩不断，速度太快了，神啊。。。。太厉害了，小辣椒每个作业都完成是不可能了
选中意的玩玩就好 马黑黑 发表于 2025-9-30 16:49
选中意的玩玩就好
只能这样了，那个文本文字的我想可以玩的{:4_173:} 小辣椒 发表于 2025-9-30 16:49
每个播放器都有自己的特色
svgdr 让 svg 的使用变得简单。当时开发就是对标做帖的 小辣椒 发表于 2025-9-30 16:52
只能这样了，那个文本文字的我想可以玩的
当然可以
页:
[1]