马黑黑 发表于 2025-9-26 12:52

升

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/rise.webp') no-repeat center/cover; --ma-size: 16vw; }
        #progress { position: absolute; width: 100%; height: 100%; }
        #ma { display: grid; place-items: center; bottom: 30px; animation: unset; cursor: unset; }
        #player { position: absolute; width: 62%; height: 62%; border-radius: 50%; cursor: pointer; animation: rotate 8s linear infinite var(--state); }
        #track, #prog { cursor: pointer; fill: none; stroke: lightblue; stroke-opacity: .4; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
        #prog { stroke: royalblue; stroke-opacity: 1; }
        #btnFs { bottom: 10px; color: white; border-color: currentColor !important; }
        .vid { transform: rotate(180deg); }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1386669794" autoplay loop></audio>
        <video class="vid pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/01/92/5b4d9113bffd1.mp4" autoplay loop muted></video>
        <div id="ma">
                <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
                        <g>
                                <title>调节进度</title>
                                <path id="track" d="M390 200A180 180 0 0 0 295 364.54A180 180 0 0 0 105 364.54A180 180 0 0 0 10 200A180 180 0 0 0 105 35.46A180 180 0 0 0 295 35.46A180 180 0 0 0 390 200" />
                                <path id="prog" d="M390 200A180 180 0 0 0 295 364.54A180 180 0 0 0 105 364.54A180 180 0 0 0 10 200A180 180 0 0 0 105 35.46A180 180 0 0 0 295 35.46A180 180 0 0 0 390 200" />
                        </g>
                </svg>
                <img id="player" src="https://638183.freep.cn/638183/small/2025/ff2.webp" alt="" />
        </div>
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
        FS(pa, player);
</script>

马黑黑 发表于 2025-9-26 12:53

<div class="codebox">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/rise.webp') no-repeat center/cover; --ma-size: 16vw; }
        #progress { position: absolute; width: 100%; height: 100%; }
        #ma { display: grid; place-items: center; bottom: 30px; animation: unset; cursor: unset; }
        #player { position: absolute; width: 62%; height: 62%; border-radius: 50%; cursor: pointer; animation: rotate 8s linear infinite var(--state); }
        #track, #prog { cursor: pointer; fill: none; stroke: lightblue; stroke-opacity: .4; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
        #prog { stroke: royalblue; stroke-opacity: 1; }
        #btnFs { bottom: 10px; color: white; border-color: currentColor !important; }
        .vid { transform: rotate(180deg); }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=1386669794" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="vid pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/01/92/5b4d9113bffd1.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;div id="ma"&gt;
                &lt;svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"&gt;
                        &lt;g&gt;
                                &lt;title&gt;调节进度&lt;/title&gt;
                                &lt;path id="track" d="M390 200A180 180 0 0 0 295 364.54A180 180 0 0 0 105 364.54A180 180 0 0 0 10 200A180 180 0 0 0 105 35.46A180 180 0 0 0 295 35.46A180 180 0 0 0 390 200" /&gt;
                                &lt;path id="prog" d="M390 200A180 180 0 0 0 295 364.54A180 180 0 0 0 105 364.54A180 180 0 0 0 10 200A180 180 0 0 0 105 35.46A180 180 0 0 0 295 35.46A180 180 0 0 0 390 200" /&gt;
                        &lt;/g&gt;
                &lt;/svg&gt;
                &lt;img id="player" src="https://638183.freep.cn/638183/small/2025/ff2.webp" alt="" /&gt;
        &lt;/div&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
        FS(pa, player);
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

红影 发表于 2025-9-26 15:53

看到这路径，感觉是那个伞的顶点被连接起来了，看代码，原来是另外画的呢，真漂亮{:4_187:}

马黑黑 发表于 2025-9-26 18:05

红影 发表于 2025-9-26 15:53
看到这路径，感觉是那个伞的顶点被连接起来了，看代码，原来是另外画的呢，真漂亮

这个进度控制器虽然是svg直接绘制的，但背后的功劳归给 svgdr：在它那里使用 circlePoints 制作好进度条样式，复制生成的 path 标签代码到帖子中来，最后做必要处理。

樵歌 发表于 2025-9-26 19:04

这个播放器真漂亮，好喜欢。有点像桐子花花。

马黑黑 发表于 2025-9-26 19:48

樵歌 发表于 2025-9-26 19:04
这个播放器真漂亮，好喜欢。有点像桐子花花。

是吧？俺老家那里到处都是

红影 发表于 2025-9-26 21:55

马黑黑 发表于 2025-9-26 18:05
这个进度控制器虽然是svg直接绘制的，但背后的功劳归给 svgdr：在它那里使用 circlePoints 制作好进度条 ...

原来是使用 circlePoints 制作好的，有意思，这个还挺好看的呢{:4_187:}

马黑黑 发表于 2025-9-26 22:00

红影 发表于 2025-9-26 21:55
原来是使用 circlePoints 制作好的，有意思，这个还挺好看的呢

circlePoints指令是计算顶点坐标

樵歌 发表于 2025-9-27 11:40

马黑黑 发表于 2025-9-26 19:48
是吧？俺老家那里到处都是

以前桐子油可好用了，一般用来木质防腐，现在用得少，俺 们这样漫山遍野都是，没有收购。。。

马黑黑 发表于 2025-9-27 12:03

樵歌 发表于 2025-9-27 11:40
以前桐子油可好用了，一般用来木质防腐，现在用得少，俺 们这样漫山遍野都是，没有收购。。。

资源浪费了

红影 发表于 2025-9-27 22:55

马黑黑 发表于 2025-9-26 22:00
circlePoints指令是计算顶点坐标

嗯嗯，这些顶点取出来还是挺有用的。

小辣椒 发表于 2025-9-27 23:03

这路径设置漂亮，里面的播放器好美的

小辣椒 发表于 2025-9-27 23:05

整体效果特别好，这个要学习做一个作业

樵歌 发表于 2025-9-28 06:47

马黑黑 发表于 2025-9-27 12:03
资源浪费了

一方面桐油二十多元一斤，另一方面没人收购，可能是需求量太少吧。

马黑黑 发表于 2025-9-28 12:24

樵歌 发表于 2025-9-28 06:47
一方面桐油二十多元一斤，另一方面没人收购，可能是需求量太少吧。

有替代品，且替代品价廉物美

马黑黑 发表于 2025-9-28 12:43

小辣椒 发表于 2025-9-27 23:05
整体效果特别好，这个要学习做一个作业

{:4_191:}

马黑黑 发表于 2025-9-28 12:43

小辣椒 发表于 2025-9-27 23:03
这路径设置漂亮，里面的播放器好美的

还有更美的，还没用到帖子里

马黑黑 发表于 2025-9-28 12:45

红影 发表于 2025-9-27 22:55
嗯嗯，这些顶点取出来还是挺有用的。

记得以前介绍的 cssdoodle 吧？它全部使用 polygon 做路径用来剪裁 div，需要的顶点数有时候会非常多（比如裁剪成圆，通常需要至少100个顶点才比较平滑）。

朵拉 发表于 2025-9-28 21:18

漂亮效果，学生已交作业，请老师指正{:4_190:}

马黑黑 发表于 2025-9-28 21:37

朵拉 发表于 2025-9-28 21:18
漂亮效果，学生已交作业，请老师指正

{:4_199:}
页: [1]
查看完整版本: 升