朵拉 发表于 2025-10-28 23:50

我想要占据你（学习马黑黑无人智胜进行曲效果）

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/6900ccb03203f7be00aca16a.jpg') no-repeat center/cover; }
    li-zi { position: absolute; width: 40px; height: 40px; border-radius: 0 50%; animation: rot 4s linear infinite var(--state); }
</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/bbbf680702329fbbc06aa29a674503c5.mp3'});
    tz.add('video','', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c13bf94c37.mp4'});
    tz.add('video','', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/15653652/01/40/17/632c24f41cf1e.mp4'});
    tz.add('div', 'lzpa', 'wrap200 rot-ani').playmp3().style('height: 180px; cursor: pointer');
    const points = tz.ringPos(8, {cx: 100, cy: 100, r1: 100, r2: 80, offsetX: 20, offsetY: 20});
    points.forEach(p => {
      tz.add('li-zi', 'lzpa', '', {
            style: `
                left: ${p}px;
                top: ${p}px;
                background: radial-gradient(#ddd, ${tz.color16()});
            `
      }).to('lzpa');
    });
    tz.bgprog().style('bottom: 30px; color: #ff770f');
    tz.fs().style('right: 30px; bottom: 20px');
</script>

朵拉 发表于 2025-10-28 23:51

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

红影 发表于 2025-10-29 10:43

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

马黑黑 发表于 2025-10-29 17:45

播放器的样式、位置和背景图片搭配不好
页: [1]
查看完整版本: 我想要占据你（学习马黑黑无人智胜进行曲效果）