朵拉 发表于 2025-10-27 22:12

我们都被忘了（学习马黑黑秋效果）

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.css';
    .pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68ff79ac3203f7be00a77042.jpg') no-repeat center/cover; }
    li-zi { position: absolute; top: -20px; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; animation: down var(--duration) var(--delay) linear infinite var(--state); }
    @keyframes down { to { transform: translateY(var(--yy)); } }
</style>

<div id="pa" class="pa"></div>

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js';
    const tz = TZ.TZ('pa');

    tz.add('audio', '', '', {src: 'https://cccimg.com/view.php/b533ffd1eaf8ae60464d7ca4e973493e.mp3'});
    tz.add('img', '', 'rotate-ani sepia', {src: 'https://638183.freep.cn/638183/small/webp/f02.webp'}).playmp3();

    const total = 30;
    let frg = document.createDocumentFragment();
    Array.from({length: total}).forEach((lz, idx) => {
      lz = document.createElement('li-zi');
      lz.style.cssText += `
            --duration: ${tz.getRanInt(8, 16)}s;
            --delay: ${tz.getRanInt(-10, 0)}s;
            --yy: ${pa.offsetHeight + 40}px;
            left: ${tz.ranPos(pa.offsetWidth, 20)}px;
            background: linear-gradient(${tz.getRanInt(30, 180)}deg, ${tz.color16()}, ${tz.color16()});
      `;
      frg.appendChild(lz);
    });
    pa.appendChild(frg);
</script>

朵拉 发表于 2025-10-27 22:13

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

马黑黑 发表于 2025-10-27 22:58

很漂亮

小辣椒 发表于 2025-10-27 23:04

欣赏朵拉漂亮的制作{:4_199:}

红影 发表于 2025-10-27 23:19

漂亮，欣赏朵宝好帖{:4_199:}
页: [1]
查看完整版本: 我们都被忘了（学习马黑黑秋效果）