论坛 › 音乐沙龙 › 无人智胜进行曲

马黑黑 发表于 2025-10-28 13:39

无人智胜进行曲

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/wrvu.webp') 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://music.163.com/song/media/outer/url?id=2745152461'});
    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: darkblue');
    tz.fs().style('right: 30px; bottom: 20px');
</script>

马黑黑 发表于 2025-10-28 13:40

代码

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/wrvu.webp') 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://music.163.com/song/media/outer/url?id=2745152461'});
    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: darkblue');
    tz.fs().style('right: 30px; bottom: 20px');
</script>

马黑黑 发表于 2025-10-28 13:42

《无人智胜进行曲》是中国作曲家李旭昊创作的一首军乐作品，首次在2025年9月3日的阅兵式上演出，旨在展现科技与军事的结合

马黑黑 发表于 2025-10-28 14:06

小播创建方法：容器元素（id="lzpa"）加自定义粒子（li-zi）

先创建容器元素，代码 15 行：

      tz.add('div', 'lzpa', 'wrap200 rot-ani').playmp3().style('height: 180px; cursor: pointer');

使用的指令是 add() ：添加 div 元素，id="lzpa"，用于后续识别标志；class="wrap200 rot-ani" 共两个，wrap200 样式为 200*200 的元素，绝对定位，rot-ani 样式为运行关键帧动画 rot；链式调用指令 playmp3() 表示它是小播；链式 style() 指令补充设置一些CSS样式，这里改变高度、增设指针样式。

接着创建自定义粒，代码 16~25 行：

      16行 ：获取8个外切圆顶点数据，复制给 points 变量，得到的是一个二维数组，格式为 [,] 酱紫。所用指令为 ringPos()，参数一是顶点数，参数二是一个配置，cx、cy 为预设外切圆圆心坐标，r1、r2 为外切圆长短半径，offsetX、offsetY 为XY偏移量（依据粒子宽高的一半设置）；

      17~25行 ：遍历所有顶点，在每一个顶点处创建一个粒子，粒子背景使用径向渐变（两个颜色，一个固定，一个随机）。每一个粒子都是使用 add() 指令创建，创建后添加给 lzpa 容器。

CSS中，04 行代码，li-zi 是自定义选择器，做了些简单设置，包括外观、运行动画等。

马黑黑 发表于 2025-10-28 14:07

视频用了两个，都是熊哥猫哥家的。感谢熊哥猫哥。

杨帆 发表于 2025-10-28 18:33

漂亮！谢谢马老师经典示范与精彩分享{:4_180:}

梦江南 发表于 2025-10-28 18:42

精彩！高科技也用上了。黑黑老师辛苦了！

马黑黑 发表于 2025-10-28 18:53

梦江南 发表于 2025-10-28 18:42
精彩！高科技也用上了。黑黑老师辛苦了！

{:4_190:}

马黑黑 发表于 2025-10-28 18:53

杨帆 发表于 2025-10-28 18:33
漂亮！谢谢马老师经典示范与精彩分享

{:4_190:}

红影 发表于 2025-10-28 21:37

这样的背景和这样的粒子小播十分相配呢，直升机战队呢。
小播每次刷新颜色都不一样，更魔幻{:4_187:}

红影 发表于 2025-10-28 21:39

16行的外切圆顶点的设置又有点忘记了，还好黑黑后面有详细的解说，真好{:4_199:}

马黑黑 发表于 2025-10-28 21:57

红影 发表于 2025-10-28 21:37
这样的背景和这样的粒子小播十分相配呢，直升机战队呢。
小播每次刷新颜色都不一样，更魔幻

{:4_190:}

马黑黑 发表于 2025-10-28 21:57

红影 发表于 2025-10-28 21:39
16行的外切圆顶点的设置又有点忘记了，还好黑黑后面有详细的解说，真好

慢慢会熟悉的吧？又不是很复杂的设计

朵拉 发表于 2025-10-28 22:33

老师好，这播放器的位置和大小 是在哪一句调整{:4_190:}

马黑黑 发表于 2025-10-28 23:06

朵拉 发表于 2025-10-28 22:33
老师好，这播放器的位置和大小 是在哪一句调整

这是一个相对复杂的机制：播放器有 div 容器，使用 wrap200 的类意味着宽高 200*200，有补充设置了高度为180；里面的子元素需要根据容器最终定型的尺寸设置圆心 cx、cy，长短半径r1、r2 以配套。

这道理好比多大的盒子装多大的蛋糕，里面涉及到一些数学问题。

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

马黑黑 发表于 2025-10-28 23:06
这是一个相对复杂的机制：播放器有 div 容器，使用 wrap200 的类意味着宽高 200*200，有补充设置了高度为 ...

老师好，试着调整过 不如意，就这样吧~~
学生已交作业，请您指正{:4_190:}

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

朵拉 发表于 2025-10-28 23:56
老师好，试着调整过 不如意，就这样吧~~
学生已交作业，请您指正

{:4_199:}

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

马黑黑 发表于 2025-10-28 21:57
慢慢会熟悉的吧？又不是很复杂的设计

是的，肯定会熟悉起来的{:4_187:}

马黑黑 发表于 2025-10-29 22:57

红影 发表于 2025-10-29 22:10
是的，肯定会熟悉起来的

那就好

偶然~ 发表于 2025-11-17 13:46

来欣赏马老师的精品佳作，祝您创作如春泉涌流不息！

查看完整版本: 无人智胜进行曲