朵拉 发表于 2025-9-5 23:50

金玉良缘（学习马黑黑格拉斯微风效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68bb03f358cb8da5c881198d.jpg') no-repeat center/cover; --ma-size: 12%; }
        #btnFs { left: 30px; bottom: 20px; color: skyblue; border-color: currentColor!important; }
        #prog { position: absolute; cursor: pointer; opacity: 0.7; bottom: 20px; width: var(--ma-size); }
        #ma { bottom: 263px; border-radius: 50%; }
        #msvg rect { transform-box: fill-box; transform-origin: center; animation: rotate 4s var(--delay) linear infinite var(--state); }

</style>

<div id="pa">
        <audio id="aud" src="http://lsjwldx.com/myfile/duola/jinyulyuan.mp3" autoplay="" loop=""></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/00/30/01/5fa35f70c94d7.mp4" autoplay loop muted></video>
        <progress id="prog"></progress>
        <div id="ma"><svg id="msvg" width="100%" height="100%" viewBox="-200 -200 400 400"></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.defs('defs');
        dr.g('g1').addTo('defs');
        dr.polyline('0 0,0 150', 'none', 'cyan', 3).addTo('#g1');
        dr.rect(-20, 150, 40, 40, 'skyblue').addTo('#g1');
        var tt = 12;
        Array.from({length: tt}).forEach((_,k) => {
                dr.use('#g1', 0, 0).transform(`rotate(${360/tt*k})`).style(`--delay: ${Math.random() * -4}s`);               
        });
       
        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-5 23:50

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

梦江南 发表于 2025-9-6 08:33

佳作欣赏，问好朵拉老师。

马黑黑 发表于 2025-9-6 09:30

{:4_199:}

梦油 发表于 2025-9-6 11:06

欣赏佳作，问候朵拉。

红影 发表于 2025-9-6 12:34

好像听不到？
制作漂亮，欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 金玉良缘（学习马黑黑格拉斯微风效果）