[音乐心情] 秋

马黑黑 · 发表于 2025-10-27 12:32

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

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

x

本帖最后由马黑黑于 2025-10-27 13:11 编辑

马黑黑 · 发表于 2025-10-27 12:33

本帖最后由马黑黑于 2025-10-27 13:11 编辑

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/qq66.webp') no-repeat center/cover; }
li-zi { position: absolute; top: -20px; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; animation: down var(--duration) var(--delay) linear infinite var(--state); }
@keyframes down { to { transform: translateY(var(--yy)); } }
</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=2077974904'});
tz.add('img', '', 'rotate-ani sepia', {src: 'https://638183.freep.cn/638183/small/webp/f02.webp'}).playmp3();
const total = 30;
let frg = document.createDocumentFragment();
Array.from({length: total}).forEach((lz, idx) => {
lz = document.createElement('li-zi');
lz.style.cssText += `
--duration: ${tz.getRanInt(8, 16)}s;
--delay: ${tz.getRanInt(-10, 0)}s;
--yy: ${pa.offsetHeight + 40}px;
left: ${tz.ranPos(pa.offsetWidth, 20)}px;
background: linear-gradient(${tz.getRanInt(30, 180)}deg, ${tz.color16()}, ${tz.color16()});
`;
frg.appendChild(lz);
});
pa.appendChild(frg);
</script>

复制代码

马黑黑 · 发表于 2025-10-27 12:46

本帖演示 tzMaker 自定义粒子系统。

粒子系统首先通过CSS li-zi 选择器设计了基础样式，包括尺寸、形状、运行的动画等内容。其次，在JS中，动态创建 30 个 <li-zi> 标签，设置几个CSS变量、粒子的水平位置、背景色，这里大量借用 tzMaker 提供的通用方法分别获取两个整数之间的随机整数、随机16进制颜色。

tz.color16() 指令比较好理解，它获取随机的16进制颜色，返回颜色值（例如，#5d668c）；

tz.getRanInt(min, max) 指令获取两个整数之间的随机整数，含边界数，返回随机整数。例如想在 0~20之间得到一个随机数，用 tz.getRanInt(0, 20) 或 tz.getRanInt(20, 0) 都可以实现。

这类工具性指令可以简化表达式的拼装。像第 26 行代码，三次获取随机值，如果使用原始的做法，代码恐怕会比较繁琐，指令使用tz提供的两个工具指令就很方便，更不用太多操心字符拼接问题。