朵拉 发表于 2025-9-6 22:35

星光降落（学习马黑黑山河壮丽效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68bc3f4558cb8da5c884d1f0.jpg') no-repeat center/cover; --ma-size: 10%; }
        #btnFs { bottom: 20px; color: silver; border-color: currentColor!important; }
        #prog { position: absolute; right: -50px; bottom: 100px; transform: rotate(-90deg); cursor: pointer; filter: hue-rotate(330deg);}
        #ma { left: 700px; top: 80px; border-radius: 50%; }
        #ma { opacity: 0.5; border-radius: 50%; }
</style>

<div id="pa">
        <audio id="aud" src="https://cccimg.com/view.php/fff14a62aff284c8a8ab1259ae9568ed.mp3" autoplay="" loop=""></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/01/73/5b495ddab7660.mp4" autoplay loop muted></video>
        <progress id="prog"></progress>
        <div id="ma">
                <svg id="msvg" width="100%" height="100%" viewBox="-200 -200 400 400">
                        <path d="M 0 0 C -100 -250 100 -250 0 0 M 0 0 C 166.506 -211.603 266.506 -38.397 0 0 M 0 0 C 266.506 38.397 166.506 211.603 0 0 M 0 0 C 100 250 -100 250 0 0 M 0 0 C -166.506 211.603 -266.506 38.397 0 0 M 0 0 C -266.506 -38.397 -166.506 -211.603 0 0 Z" fill="teal" stroke="#fd742d " stroke-width="4" />
                </svg>
        </div>
</div>

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

        aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
        aud.onplaying = aud.onpause = () => msvg.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
       
        FS(pa, ma);
</script>

朵拉 发表于 2025-9-6 22:36

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

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

漂亮，朵宝把播放器嵌入字体中，很匠心。欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 星光降落（学习马黑黑山河壮丽效果）