朵拉 发表于 2025-10-7 23:13

【月满花潮庆华诞】小村庄月弯弯（学习马黑黑不朽效果）

本帖最后由 朵拉 于 2025-10-7 23:16 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa {
                --offsetX: 81px;
                --bg: url('https://pic1.imgdb.cn/item/68e525e9c5157e1a885b6e98.jpg') no-repeat center/100% 100%;
                --ma-size: 18%;
        }
        #ma {
                right: 30px;
                top: 30px;
                background: url('https://638183.freep.cn/638183/small/2025/dream.webp') no-repeat center/cover;
                mix-blend-mode: screen;
        }
        #btnFs { bottom: 20px; color: #eee; border-color: currentColor; }
        #msvg { position: absolute; width: 100%; height: 100%; z-index: -1; }
        .cc {
                opacity: 1;
                offset-path: path('M-600 0, Q0 -180, 600 180');
                offset-distance: 0%;
                animation:
                        opacity 0.5s var(--delay) infinite alternate var(--state),
                        move 20s var(--delay) linear infinite var(--state);
        }
        @keyframes opacity { to { opacity: 0.2; } }
        @keyframes move { to { offset-distance: 100%; } }
</style>

<div id="pa">
        <audio id="aud" src="https://cccimg.com/view.php/47f89264d7b03e60893d9a481db2c55d.mp3" autoplay="" loop=""></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/35/87/5fd818a819d1e.mp4" autoplay loop muted></video>
        <div id="ma" class="opacity"></div>
        <svg id="msvg" viewbox="-320 -180 640 360">
</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);

        Array.from({length: 60}).forEach(() => {
                var cx = Math.round(Math.random() * 310 * (Math.random() > 0.5 ? 1 : -1)),
                        cy = Math.round(Math.random() * 170 * (Math.random() > 0.5 ? 1 : -1)),
                        r = Math.ceil(Math.random() * 2 + 2),
                        color = '#' + Math.random().toString(16).substring(2, 8),
                        delay = (-20 * Math.random()).toFixed(2);
                dr.circle(cx, cy, r, color).set('class', 'cc').style(`--delay: ${delay}s`);
        });

        FS(pa, ma);
</script>

朵拉 发表于 2025-10-7 23:13

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

樵歌 发表于 2025-10-8 07:13

朵儿早上好{:4_204:}那个播放器做得特别有创意！

澜天 发表于 2025-10-8 11:56

欣赏朵拉美帖
{:4_204:}

红影 发表于 2025-10-8 19:48

漂亮，欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 【月满花潮庆华诞】小村庄月弯弯（学习马黑黑不朽效果）