朵拉 发表于 2025-9-7 15:43

Dehors（学习马黑黑Anger效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68bd355258cb8da5c885ed81.jpg') no-repeat center/cover; --ma-size: 12%; }
        #btnFs { right: 20px; top: 20px; color: #ccc; border-color: currentColor!important; }
        #prog { position: absolute; right: 10px; bottom: 10px; width: var(--ma-size); cursor: pointer; filter: hue-rotate(80deg) opacity(.6); }
        #ma { right: 10px; bottom: 40px; border-radius: 50%; }
        .vid { mixed-blend-mode: screen; opacity: 1; }
        #msvg line { stroke-dasharray: 4 8; stroke-dashoffset: 100%; animation: move 2s linear infinite alternate var(--state); }
        @keyframes move { to { stroke-dashoffset: 0; } }
</style>

<div id="pa">
        <audio id="aud" src="https://cccimg.com/view.php/af85cab2fe75639ab76e9d4f967d25dd.mp3" autoplay="" loop=""></audio>
        <video class="vid pd-vid" src="https://img.tukuppt.com/video_show/7165162/00/19/84/5f16a04c6d293.mp4" autoplay loop muted></video>
        <progress id="prog"></progress>
        <div id="ma" class="opacity">
                <svg id="msvg" width="100%" height="100%" viewBox="-100 -100 200 200"></svg>
        </div>
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

        var dr = Dr.dr(msvg);
        dr.circle(0, 0, 80, 'none', '#fff', 20).set('stroke-dasharray', '4 8');
var tt = 3;
Array.from({length: tt}).forEach((_,k) => {
        dr.line(3, 0, 70, 0, '#eee', 20).transform(`rotate(${360/tt*k})`).set('stroke-dasharray', '4 2');
});

        aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
        prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;

        FS(pa, ma);
</script>

朵拉 发表于 2025-9-7 15:45

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

马黑黑 发表于 2025-9-7 15:46

{:4_199:}

梦江南 发表于 2025-9-7 16:07

漂亮，欣赏点赞。{:4_199:}

红影 发表于 2025-9-7 16:31

漂亮，欣赏朵宝好帖{:4_204:}
页: [1]
查看完整版本: Dehors（学习马黑黑Anger效果）