论坛 › 欢乐水吧 › 知 我（学习马黑黑上陵效果）

朵拉 发表于 2025-11-14 21:32

知 我（学习马黑黑上陵效果）

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/69172dac3203f7be0003ed24.jpg') no-repeat center/cover; }
    .star { position: absolute; width: 4px; height: 4px; background: lightblue; animation: flash 2s infinite alternate var(--state); }
    .ball { position: absolute; width: 36px; height: 36px; background: linear-gradient(tan, var(--bg)); border-radius: 50%; animation: hue-rot linear .5s infinite alternate var(--state), rot linear 4s infinite var(--state); cursor: pointer; }
    @keyframes flash { to { opacity: 0; transform: rotate(var(--deg)); } }
    @keyframes hue-rot { to { filter: hue-rotate(200deg); } }
</style>

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

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

    tz.add('audio', '', '', { src: 'https://cccimg.com/view.php/397854667fc37442161207f1a486a528.mp3' });

    Array.from({length: 100}).forEach( (_, key) => {
      const x = tz.ranPos(pa.offsetWidth);
      const y = tz.ranPos(pa.offsetHeight / 3);
      tz.add('div', '', 'star', { style: `
            left: ${100 * x / pa.offsetWidth}%;
            top: ${100 * y / pa.offsetHeight}%;
            animation-duration: ${1 + tz.getRanInt(1,0)}s;
            animation-delay: ${tz.getRanInt(-2,0)}s;
            --deg: ${tz.getRanInt(50, 160)}deg;
      `});
    });
   
    const points = tz.ringPos(10, {
      cx: pa.offsetWidth / 2,
      cy: pa.offsetHeight / 3,
      r1: pa.offsetWidth / 4,
      r2: pa.offsetHeight / 4,
      a: -180,
    });
   
    points.forEach(point => {
      tz.add('div', '', 'ball', {style: `
            left: ${100 * point / pa.offsetWidth}%;
            top: ${100 * point / pa.offsetHeight}%;
            --bg: ${tz.color16()};
      `}).playmp3();
    });
   
    tz.fs().style('left: 20px; bottom: 20px');
</script>

朵拉 发表于 2025-11-14 21:34

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

红影 发表于 2025-11-14 22:05

朵宝真快啊。做得漂亮。
欣赏朵宝好帖{:4_187:}

梦江南 发表于 2025-11-15 09:06

欣赏朵拉精美制作，画面意境深远。赞！{:4_204:}

梦油 发表于 2025-11-15 09:50

欣赏精彩，问候朵拉。

马黑黑 发表于 2025-11-15 11:15

{:4_199:}

查看完整版本: 知 我（学习马黑黑上陵效果）