马黑黑 发表于 2025-9-10 07:50

叮咚

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: beige url('https://638183.freep.cn/638183/t24/w6/dkds.webp') no-repeat center/cover; }
        #ma { width: 200px; height: 200px; right: 50px; bottom: 50px; border-radius: 50%; background: url('https://638183.freep.cn/638183/small/2025/ff2.webp') no-repeat center/cover; }
        #progress { position: absolute; width: 260px; height: 260px; right: 20px; bottom: 20px; }
        #prog, #track { fill: none; stroke: rgba(150,188,200,.5); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; transition: .15s; cursor: pointer; }
        #prog { stroke: rgba(150,188,200); }
        #btnFs { left: 20px; bottom: 20px; color: #eee; border-color: currentColor!important; }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=496064631" autoplay loop></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/44/85/6041e2ef1b2d8.mp4" autoplay loop muted></video>
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <circle id="track" cx="0" cy="0" r="180" />
                <circle id="prog" cx="0" cy="0" r="180" />
        </svg>
        <div id="ma" class="hue-rotate"></div>

</div>

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

马黑黑 发表于 2025-9-10 07:50

<div class="codebox">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: beige url('https://638183.freep.cn/638183/t24/w6/dkds.webp') no-repeat center/cover; }
        #ma { width: 200px; height: 200px; right: 50px; bottom: 50px; border-radius: 50%; background: url('https://638183.freep.cn/638183/small/2025/ff2.webp') no-repeat center/cover; }
        #progress { position: absolute; width: 260px; height: 260px; right: 20px; bottom: 20px; }
        #prog, #track { fill: none; stroke: rgba(150,188,200,.5); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; transition: .15s; cursor: pointer; }
        #prog { stroke: rgba(150,188,200); }
        #btnFs { left: 20px; bottom: 20px; color: #eee; border-color: currentColor!important; }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=496064631" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/44/85/6041e2ef1b2d8.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"&gt;
                &lt;circle id="track" cx="0" cy="0" r="180" /&gt;
                &lt;circle id="prog" cx="0" cy="0" r="180" /&gt;
        &lt;/svg&gt;
        &lt;div id="ma" class="hue-rotate"&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, ma);
&lt;/script&gt;
</div>

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

马黑黑 发表于 2025-9-10 07:56

演示 pathprog.js ES模块对基本SVG图形的完美支持。SVG代码中，svg的id、用于进度指示/控制的子元素的id是模块检测是否运行进度条功能的依据，三个id依次为 progress、track、prog，不能改变。

音频作为为DJ小啡原创，节奏奇妙，颇具宏大叙事倾向。

梦江南 发表于 2025-9-10 10:15

欣赏黑黑老师的精彩制作，辛苦了！{:4_190:}

红影 发表于 2025-9-10 11:39

圆是最简单的标准图形。这个帖子小播和svg进度条完美结合，漂亮{:4_187:}

红影 发表于 2025-9-10 11:41

track和prog使用相同颜色，用透明度不同来区分，这思路也很奇妙{:4_199:}

马黑黑 发表于 2025-9-10 12:10

红影 发表于 2025-9-10 11:41
track和prog使用相同颜色，用透明度不同来区分，这思路也很奇妙

这是很普通的思路

马黑黑 发表于 2025-9-10 12:11

红影 发表于 2025-9-10 11:39
圆是最简单的标准图形。这个帖子小播和svg进度条完美结合，漂亮

这个首发的也很漂亮：https://mahei.ccccocccc.cc/art/?st=0&id=1757461470

马黑黑 发表于 2025-9-10 12:11

梦江南 发表于 2025-9-10 10:15
欣赏黑黑老师的精彩制作，辛苦了！

{:4_190:}

杨帆 发表于 2025-9-10 16:40

模块对基本SVG图形完美支持，谢谢马老师经典分享{:4_191:}

马黑黑 发表于 2025-9-10 18:13

杨帆 发表于 2025-9-10 16:40
模块对基本SVG图形完美支持，谢谢马老师经典分享

{:4_190:}

红影 发表于 2025-9-10 21:17

马黑黑 发表于 2025-9-10 12:10
这是很普通的思路

不普通呢，很奇妙{:4_187:}

红影 发表于 2025-9-10 21:19

马黑黑 发表于 2025-9-10 12:11
这个首发的也很漂亮：https://mahei.ccccocccc.cc/art/?st=0&id=1757461470

这个方的，好像比圆更漂亮些呢。

马黑黑 发表于 2025-9-10 21:48

红影 发表于 2025-9-10 21:19
这个方的，好像比圆更漂亮些呢。

圆也不是不好看，问题是你看见了方的了

马黑黑 发表于 2025-9-10 21:49

红影 发表于 2025-9-10 21:17
不普通呢，很奇妙

这个太普通了，俺们农村人染布都这么做

红影 发表于 2025-9-10 22:57

马黑黑 发表于 2025-9-10 21:48
圆也不是不好看，问题是你看见了方的了

也是，有比较了，才觉得另一个更好看{:4_173:}

红影 发表于 2025-9-10 22:57

马黑黑 发表于 2025-9-10 21:49
这个太普通了，俺们农村人染布都这么做

用不用的透明度染布？

马黑黑 发表于 2025-9-10 23:13

红影 发表于 2025-9-10 22:57
用不用的透明度染布？

俺举个栗子：多色糯米饭，黑、红、紫、粉都可以用枫叶染色，控制浓度即可。一般的做法就是稀释，本质就是加入不同的透明度。

马黑黑 发表于 2025-9-10 23:14

红影 发表于 2025-9-10 22:57
也是，有比较了，才觉得另一个更好看

这基本上可以定义为见异思迁

小辣椒 发表于 2025-9-11 13:25

小辣椒欣赏加学习{:4_199:}
页: [1] 2 3 4 5 6 7 8
查看完整版本: 叮咚