朵拉 发表于 2025-9-18 17:03

难 解（学习马黑黑逃亡效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 64px; --bg: #ccc url('https://pic1.imgdb.cn/item/68cbbc7ec5157e1a8816d06a.jpg') no-repeat center/cover; }
        #progress { position: absolute; width: 10vw; height: 10vw; right: 134px; bottom: 20px; }
        #prog, #track { fill: none; stroke: lightblue; stroke-width: 16; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
        #prog { stroke-opacity: 1; }
        #player { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: transparent; animation: rotate 8s linear infinite var(--state); }
        #btnFs { left: 20px; bottom: 20px; color: silver; border-color: currentColor!important; }
</style>

<div id="pa">
        <audio id="aud" src="https://cccimg.com/view.php/d770c8c760201201f5c1bfbc4c0cf825.mp3" autoplay="" loop=""></audio>
        <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/13/15/25/20/video6822f3e0d18c7.mp4" autoplay loop muted></video>
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
                <g id="player" class="sepia"><title>ALT+X</title></g>
                <g id="pg"><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/web/mod/svgdr.mod.js';

        var dr = Dr.dr(progress);
        var ranColor = () => `hsla(${Math.random() * 360}, 100%, 50%, .9)`;
        var ar1 = dr.circlePoints(20, 200, 180), ar2 = dr.circlePoints(3, 200, 120, 15);
        ar1.forEach(b => dr.circle(b, b, 20, ranColor()).addTo('player'));
        dr.circle(200,200,200).addTo('player');
        dr.polygon(ar2.join(',')).id('track').addTo('pg');
        dr.polygon(ar2.join(',')).id('prog').addTo('pg');

        FS(pa, player);
</script>

朵拉 发表于 2025-9-18 17:04

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

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

朵拉 发表于 2025-9-18 17:04
@马黑黑
老师好，学生交作业，请指正

{:4_199:}

澜天 发表于 2025-9-18 19:14

美帖
好歌
{:4_204:}

红影 发表于 2025-9-18 19:49

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

杨帆 发表于 2025-9-18 23:32

本帖最后由 杨帆 于 2025-9-18 23:34 编辑

歌名就是《难解》？漂亮！谢谢朵拉精彩分享{:4_204:}
页: [1]
查看完整版本: 难 解（学习马黑黑逃亡效果）