朵拉 发表于 2025-9-12 09:53

秋 风 起（学习马黑黑叮咚效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: beige url('https://pic1.imgdb.cn/item/68c2f22a58cb8da5c89e6264.jpg') no-repeat center/cover; }
        #ma { width: 100px; height: 100px; right: 50px; bottom: 20px; border-radius: 50%; background: url('https://638183.freep.cn/638183/small/2025/ff2.webp') no-repeat center/cover; }
        #progress { position: absolute; width: 100px; height: 100px; right: 50px; 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://cccimg.com/view.php/c5db0bfb94c74f411a15332a368048a8.mp3" autoplay="" loop=""></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/01/92/5b4de2164e31e.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-12 09:53

@马黑黑
老师好，学生交作业，请指正{:4_190:}

梦江南 发表于 2025-9-12 10:03

问好朵拉老师，佳作欣赏。{:4_199:}

偶然~ 发表于 2025-9-12 10:31

制作大气

偶然~ 发表于 2025-9-12 10:31

感谢朵拉带来的精品，辛苦了。

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

{:4_199:}

梦油 发表于 2025-9-12 17:21

欣赏佳作，问候朵拉。

红影 发表于 2025-9-12 19:56

制作漂亮，欣赏朵宝好帖{:4_199:}
页: [1]
查看完整版本: 秋 风 起（学习马黑黑叮咚效果）