朵拉 发表于 2025-8-17 23:03

星斗照高楼（学习马黑黑Disillusion（幻灭）效果）

本帖最后由 朵拉 于 2025-8-17 23:14 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa {
                --offsetX: 81px;
                --bg: #eee url('https://pic1.imgdb.cn/item/68a1f13b58cb8da5c82b46b3.jpg') no-repeat center/cover;
                --per: 3%;
                mask: linear-gradient(45deg, red 45%, rgba(0,0,0,.9) 45% 55%, red 55% 0) 0 0 / var(--per) 50%;
                -webkit-mask: linear-gradient(45deg, red 45%, rgba(0,0,0,.9) 45% 55%, red 55% 0) 0 0/var(--per) 50%;
        }
        #ma {
                width: 100%;
                height: 100%;
                background: inherit;
                mask: url('https://638183.freep.cn/638183/web/svg/balls2.svg') no-repeat center / 50% 50%, url('https://638183.freep.cn/638183/web/svg/hexagon.svg') no-repeat center / 50% 50%;
                -webkit-mask: url('https://638183.freep.cn/638183/web/svg/balls2.svg') no-repeat center / 50% 50%, url('https://638183.freep.cn/638183/web/svg/hexagon.svg') no-repeat center / 50% 50%;
                clip-path: circle(25%);
        }
        #btnFs { bottom: 20px; color: #eee; }
</style>

<div id="pa">
        <audio id="aud" src="https://cccimg.com/view.php/d06b1ef9ad3719cb06fe6d600249ba66.mp3" autoplay="" loop=""></audio>
       
        <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/01/07/14/35/49/video677ccb4546a69.mp4" autoplay loop muted></video>
        <div id="ma" class="invert"></div>
</div>

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

        var per = 3, step = 0.05, raf;

        aud.onplaying = aud.onpaused = () => aud.paused ? cancelAnimationFrame(raf) : animate();
        aud.onseek = () => cancelAnimationFrame(raf);

        animate();

        function animate() {
                if (document.visibilityState === 'hidden') return;
                cancelAnimationFrame(raf);
                per += step;
                if (per> 100 || per < 3) step = -step;
                pa.style.setProperty('--per', `${per}%`);
                if (!aud.paused) raf = requestAnimationFrame(animate);
        }
</script>

朵拉 发表于 2025-8-17 23:05

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

马黑黑 发表于 2025-8-17 23:15

{:4_199:}

偶然~ 发表于 2025-8-18 10:57

音画大气唯美

偶然~ 发表于 2025-8-18 10:58

感谢朵拉带来的精彩，辛苦了

红影 发表于 2025-8-18 19:30

漂亮。欣赏朵宝好帖{:4_199:}
页: [1]
查看完整版本: 星斗照高楼（学习马黑黑Disillusion（幻灭）效果）