朵拉 发表于 2025-9-17 16:54

梦幻诛仙宿命版（学习马黑黑Rags To Rings效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: #ccc url('https://pic1.imgdb.cn/item/68ca708fc5157e1a881200b8.jpg') no-repeat center/cover; }
        #progress { position: absolute; width: 12vw; height: 12vw; right: 30px; bottom: 30px; transition: .4s; }
        #progress:hover { transform: scale(1.2); }
        #prog, #track { fill: none; stroke: #CB4085; stroke-width: 16; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
        #prog { stroke-opacity: .8; }
        #g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: #CB4085; fill-rule: evenodd; animation: rotate 8s linear infinite var(--state); }
        #btnFs { right: 20px; top: 20px; color: magenta; background: pink; border-color: currentColor!important; }
</style>

<div id="pa">
        <audio id="aud" src="https://cccimg.com/view.php/b2da37f5ef2fd9f9566f46ccc8c062ca.mp3" autoplay="" loop=""></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/3664703/00/02/09/5b505b5860f94.mp4" autoplay loop muted></video>
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
                <g id="g1" class="brightness"><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/svgdr/svgdr.mod.min.js';

        var dr = Dr.dr(progress);
        dr.circle(200, 200, 200, 'transparent').addTo('g1');
        dr.path('M195 160 Q250 100,150 10 Q200 200 250 10 Q150 100,200 160').addTo(g1).rotates(5, 360, 200, 200);
        dr.circle(200, 200, 30).id('track').addTo(g2);
        dr.circle(200, 200, 30).id('prog').addTo(g2);

        FS(pa, g1);
</script>

朵拉 发表于 2025-9-17 16:54

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

马黑黑 发表于 2025-9-17 18:23

{:4_199:}

红影 发表于 2025-9-17 22:32

漂亮，欣赏朵宝好帖{:4_187:}

梦江南 发表于 2025-9-18 08:42

欣赏精美制作，问好。{:4_204:}
页: [1]
查看完整版本: 梦幻诛仙宿命版（学习马黑黑Rags To Rings效果）