朵拉 发表于 2025-9-28 21:17

岸 边 客（学习马黑黑升效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: tan url('https://pic1.imgdb.cn/item/68d932b4c5157e1a8840e059.jpg') no-repeat center/cover; --ma-size: 16vw; }
        #progress { position: absolute; width: 100%; height: 100%; }
        #ma { display: grid; place-items: center; bottom: 30px; animation: unset; cursor: unset; }
        #player { position: absolute; width: 62%; height: 62%; border-radius: 50%; cursor: pointer; animation: rotate 8s linear infinite var(--state); }
        #track, #prog { cursor: pointer; fill: none; stroke: lightblue; stroke-opacity: .4; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
        #prog { stroke: royalblue; stroke-opacity: 1; }
        #btnFs { bottom: 10px; color: white; border-color: currentColor !important; }
        .vid { transform: rotate(180deg); }
</style>

<div id="pa">
        <audio id="aud" src="https://cccimg.com/view.php/e87eeb7804d4708714e6c38de1f8e649.mp3" autoplay="" loop=""></audio>
        <video class="vid pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/60/76/6396ee8f4bdad.mp4" autoplay loop muted></video>
        <div id="ma">
                <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
                        <g>
                                <title>调节进度</title>
                                <path id="track" d="M390 200A180 180 0 0 0 295 364.54A180 180 0 0 0 105 364.54A180 180 0 0 0 10 200A180 180 0 0 0 105 35.46A180 180 0 0 0 295 35.46A180 180 0 0 0 390 200" />
                                <path id="prog" d="M390 200A180 180 0 0 0 295 364.54A180 180 0 0 0 105 364.54A180 180 0 0 0 10 200A180 180 0 0 0 105 35.46A180 180 0 0 0 295 35.46A180 180 0 0 0 390 200" />
                        </g>
                </svg>
                <img id="player" src="https://638183.freep.cn/638183/small/2025/ff2.webp" alt="" />
        </div>
</div>

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

朵拉 发表于 2025-9-28 21:17

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

澜天 发表于 2025-9-28 21:29

欣赏朵拉新作
{:4_204:}

马黑黑 发表于 2025-9-28 21:38

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

{:4_199:}

小辣椒 发表于 2025-9-28 22:19

欣赏朵拉漂亮的制作，{:4_187:}

红影 发表于 2025-9-28 23:27

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

樵歌 发表于 2025-9-29 07:29

朵儿及时上交优秀作业，受到老师表扬！{:4_204:}，

樵歌 发表于 2025-9-29 07:30

祝朵儿双节快乐！{:4_177:}
页: [1]
查看完整版本: 岸 边 客（学习马黑黑升效果）