无人智胜进行曲

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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[0]}px;
top: ${p[1]}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 变量，得到的是一个二维数组，格式为 [[x1,y1],[x2,y2]] 酱紫。所用指令为 ringPos()，参数一是顶点数，参数二是一个配置，cx、cy 为预设外切圆圆心坐标，r1、r2 为外切圆长短半径，offsetX、offsetY 为XY偏移量（依据粒子宽高的一半设置）；

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

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