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

AA6

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: beige url('https://638183.freep.cn/638183/t24/w6/aa6.webp') no-repeat center/cover; }
        #progress { position: absolute; width: 200px; height: 200px; right: 30px; bottom: 30px; }
        #prog, #track { fill: none; stroke: rgba(173,216,230,.5); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; transition: .15s; cursor: pointer; }
        #prog { stroke: rgba(173,216,230); }
        #player { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: rgba(173,216,230,.5); animation: rotate 8s linear infinite var(--state); }
        #btnFs { right: 20px; top: 20px; color: rgba(173,216,230,.7); border-color: currentColor!important; }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1463844165" autoplay loop></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/06/15/615cf6769bff8.mp4" autoplay loop muted></video>
        <svg id="progress" class="brightness" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
                <path id="track" d="M390.00 200.00, 280.90 258.78 258.71 380.70, 169.10 295.11 46.29 311.68, 100.00 200.00 46.29 88.32, 169.10 104.89 258.71 19.30, 280.90 141.22 Z" />
                <path id="prog" d="M390.00 200.00, 280.90 258.78 258.71 380.70, 169.10 295.11 46.29 311.68, 100.00 200.00 46.29 88.32, 169.10 104.89 258.71 19.30, 280.90 141.22 Z" />
                <path id="player" d="M250.00 200.00, 216.18 211.76 215.45 247.55, 193.82 219.02 159.55 229.39, 180.00 200.00 159.55 170.61, 193.82 180.98 215.45 152.45, 216.18 188.24 Z" />
        </svg>
</div>

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

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

<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/aa6.webp') no-repeat center/cover; }
        #progress { position: absolute; width: 200px; height: 200px; right: 30px; bottom: 30px; }
        #prog, #track { fill: none; stroke: rgba(173,216,230,.5); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; transition: .15s; cursor: pointer; }
        #prog { stroke: rgba(173,216,230); }
        #player { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: rgba(173,216,230,.5); animation: rotate 8s linear infinite var(--state); }
        #btnFs { right: 20px; top: 20px; color: rgba(173,216,230,.7); 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=1463844165" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/06/15/615cf6769bff8.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;svg id="progress" class="brightness" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"&gt;
                &lt;path id="track" d="M390.00 200.00, 280.90 258.78 258.71 380.70, 169.10 295.11 46.29 311.68, 100.00 200.00 46.29 88.32, 169.10 104.89 258.71 19.30, 280.90 141.22 Z" /&gt;
                &lt;path id="prog" d="M390.00 200.00, 280.90 258.78 258.71 380.70, 169.10 295.11 46.29 311.68, 100.00 200.00 46.29 88.32, 169.10 104.89 258.71 19.30, 280.90 141.22 Z" /&gt;
                &lt;path id="player" d="M250.00 200.00, 216.18 211.76 215.45 247.55, 193.82 219.02 159.55 229.39, 180.00 200.00 159.55 170.61, 193.82 180.98 215.45 152.45, 216.18 188.24 Z" /&gt;
        &lt;/svg&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-12 14:24

黑黑老师背景图中的武器九三阅兵没亮相过啊！

杨帆 发表于 2025-9-12 15:42

顺畅，酣畅，流畅，谢谢马老师经典示范{:4_191:}

花飞飞 发表于 2025-9-12 18:46

艾玛，这回连里面转动的小播都是画出来的，还进行了蓝色填充。。
进度条的五角星它呼应，这一套搭得正气凛然的。。{:4_170:}

花飞飞 发表于 2025-9-12 18:48

再夸一次，这封装的模块真好，现在的JS部分清清爽爽，看着万分舒适。。。帅到极致。。。{:4_173:}

花飞飞 发表于 2025-9-12 18:53

这个太空新型武器亮相，很容易联想到击落小行星计划。。。
地球无对手，跟月亮玩一玩后，现在开始找星星玩一玩了。。
DF-5C是打服五常~~这个一看就是要打到彻底服的节奏。。
虽看不到型号应该起个名字叫F8F{:4_173:}
边打边问：服不服。。

马黑黑 发表于 2025-9-12 19:42

花飞飞 发表于 2025-9-12 18:53
这个太空新型武器亮相，很容易联想到击落小行星计划。。。
地球无对手，跟月亮玩一玩后，现在开始找星星玩 ...

{:4_172:}

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

花飞飞 发表于 2025-9-12 18:48
再夸一次，这封装的模块真好，现在的JS部分清清爽爽，看着万分舒适。。。帅到极致。。。

相当于三毛：把多余的毛都脱去了

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

花飞飞 发表于 2025-9-12 18:46
艾玛，这回连里面转动的小播都是画出来的，还进行了蓝色填充。。
进度条的五角星它呼应，这一套搭得正气凛 ...

{:4_181:}

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

梦江南 发表于 2025-9-12 14:24
黑黑老师背景图中的武器九三阅兵没亮相过啊！

有所保留

马黑黑 发表于 2025-9-12 19:44

杨帆 发表于 2025-9-12 15:42
顺畅，酣畅，流畅，谢谢马老师经典示范

{:4_190:}

红影 发表于 2025-9-12 20:46

五角星路径套着五角星小播，还都是绘制的，这个厉害了{:4_199:}

红影 发表于 2025-9-12 20:47

又是新的封装呢，这封装把帖子代码弄得太简洁了，太赞了{:4_199:}

马黑黑 发表于 2025-9-12 21:33

红影 发表于 2025-9-12 20:47
又是新的封装呢，这封装把帖子代码弄得太简洁了，太赞了

这不是新封装呀

马黑黑 发表于 2025-9-12 21:33

红影 发表于 2025-9-12 20:46
五角星路径套着五角星小播，还都是绘制的，这个厉害了

一般般吧

红影 发表于 2025-9-12 22:58

马黑黑 发表于 2025-9-12 21:33
这不是新封装呀

我还没去做过，感觉都是新的{:4_173:}

红影 发表于 2025-9-12 22:59

马黑黑 发表于 2025-9-12 21:33
一般般吧

哪里，很漂亮的呢{:4_187:}

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

红影 发表于 2025-9-12 22:59
哪里，很漂亮的呢

一般的漂亮吧

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

红影 发表于 2025-9-12 22:58
我还没去做过，感觉都是新的

这个已经使用了几天了
页: [1] 2 3 4 5
查看完整版本: AA6