朵拉 发表于 2025-8-25 23:26

抱住晚风（学习马黑黑Cyberworld效果）

本帖最后由 朵拉 于 2025-8-26 09:20 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68ac811c58cb8da5c84d144b.jpg') no-repeat center/cover; --ma-size: 15%; }
        #ma { left: 620px; bottom: 30px; }
        #lz { position: absolute; width: 12vw; height: 12vw; top: 0; }
        #btnFs { right: 20px; bottom: 20px; color: yellow; border-color: currentColor!important; }
        .cc { animation: opacity 0.5s var(--delay) infinite alternate var(--state); }
        @keyframes opacity { to { opacity: 0; } }
</style>

<div id="pa">
        <audio id="aud" src="https://cccimg.com/view.php/47ece321ec644019c8d47810c364ab63.mp3" autoplay="" loop=""></audio>
       
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/00/29/96/5fa09f4e88257.mp4" autoplay loop muted></video>
        <div id="ma" class="brightness"><svg id="msvg" width="100%" height="100%" viewbox="-200 -200 400 400"></svg></div>
        <svg id="lz" width="150" height="150" viewbox="-200 -200 400 400"></svg>
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
        var dr = Dr.dr(msvg);
        var tt = 6, d = 'M-20 0,0 -70,20 0,20 -190,0 -100,-20 -190 Z';
        Array.from({length: tt}).forEach((_,k) => {
                dr.path(d, 'olive', 'purple ', 2).transform(`rotate(${360/tt*k})`);
        });
        dr = Dr.dr(lz);
        Array.from({length: 50}).forEach((_,k) => {
                var R = Math.random() * 200 - 10;
                var cx = R * Math.cos(Math.PI / 180 * 360 / 50 * k),
                        cy = R * Math.sin(Math.PI / 180 * 360 / 50 * k),
                        r = Math.round(Math.random() * 4) + 4;
                dr.circle(cx,cy,r,'#fff').set('class','cc').style(`--delay: ${Math.random()}s`);
        });
        FS(pa, ma);
</script>

朵拉 发表于 2025-8-25 23:33

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

马黑黑 发表于 2025-8-25 23:58

播放控制器的旋转未能绕自己的中心点。原因是下面这句：

      <div id="ma" class="brightness"><svg id="msvg" width="80%" height="80%" viewbox="-200 -200 400 400"></svg></div>

宽高应为 100% 而不是 80%，因为 80% 时svg不占满其父元素 div，不处在中央。

要改变播放器的尺寸，这个模块的帖子，应改变 CSS 变量 --ma-size :

      #pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68ac811c58cb8da5c84d144b.jpg') no-repeat center/cover; --ma-size: 20%; }

比如，将 20% 改为 15%

梦江南 发表于 2025-8-26 07:57

欣赏漂亮的音画，赞！{:4_199:}

朵拉 发表于 2025-8-26 09:22

马黑黑 发表于 2025-8-25 23:58
播放控制器的旋转未能绕自己的中心点。原因是下面这句：

      


感谢老师的指正，祝您新周愉快{:4_190:}

朵拉 发表于 2025-8-26 09:22

梦江南 发表于 2025-8-26 07:57
欣赏漂亮的音画，赞！
感谢梦江南老师的临帖，祝您新周愉快{:4_190:}

红影 发表于 2025-8-26 09:49

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

马黑黑 发表于 2025-8-26 12:23

朵拉 发表于 2025-8-26 09:22
感谢老师的指正，祝您新周愉快

{:4_191:}
页: [1]
查看完整版本: 抱住晚风（学习马黑黑Cyberworld效果）