朵拉 发表于 2025-9-3 22:03

雀 跃（学习马黑黑Tremble效果）

<style>
    @import 'https://638183.freep.cn/638183/web/css/tz01.css';
    #pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68b8477458cb8da5c878d2ff.jpg') no-repeat center/cover; --ma-size: 20%; }
    #btnFs { right: 30px; bottom: 30px; color: lightblue; border-color: currentColor!important; }
    .ball { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: pink; offset-path: ellipse(45%40%); animation: move 20s var(--delay) linear infinite var(--state); }
    @keyframes move { 100% { offset-distance: 100%; } }
</style>

<div id="pa">
    <audio id="aud" src="https://cccimg.com/view.php/a592f1660c38c7d3f77a35a09efb5130.mp3" autoplay="" loop=""></audio>
    <video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.mp4" autoplay loop muted></video>
    <div id="ma" class="brightness">
      <svg width="100%" height="100%" viewBox="-200 -200 400 400">
            <path d="M -15 0 L -40 -190 Q 0 -25 40 -190 L 15 0 Q 0 -50 -15 0 M -4.635 -14.266 L 168.34 -96.755 Q 23.776 -7.725 193.061 -20.671 L 4.635 14.266 Q 47.553 -15.451 -4.635 -14.266 M 12.135 -8.817 L 144.04 130.202 Q 14.695 20.225 79.319 177.225 L -12.135 8.817 Q 29.389 40.451 12.135 -8.817 M 12.135 8.817 L -79.319 177.225 Q -14.695 20.225 -144.04 130.202 L -12.135 -8.817 Q -29.389 40.451 12.135 8.817 M -4.635 14.266 L -193.061 -20.671 Q -23.776 -7.725 -168.34 -96.755 L 4.635 -14.266 Q -47.553 -15.451 -4.635 14.266 Z" fill="#5585c1" stroke="orange">
      </svg>
    </div>
</div>

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

    var total = 20, fragment = document.createDocumentFragment();
    Array.from({length: total}).forEach((d,k) => {
      d = document.createElement('div');
      d.classList.add('ball');
      d.style.setProperty('--delay', -20 / total * k + 's');
      fragment.appendChild(d);
    });
    pa.appendChild(fragment);
</script>

朵拉 发表于 2025-9-3 22:05

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

红影 发表于 2025-9-3 23:03

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

樵歌 发表于 2025-9-4 11:28

点赞优秀作业！{:4_187:}

梦江南 发表于 2025-9-4 12:17

漂亮，谢谢朵拉老师的精美音画。欣赏点赞！{:4_204:}
页: [1]
查看完整版本: 雀 跃（学习马黑黑Tremble效果）