夜之花

马黑黑 · 发表于 2025-11-3 17:54

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

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

x

本帖最后由马黑黑于 2025-11-3 17:58 编辑

马黑黑 · 发表于 2025-11-3 17:59

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/yehx.webp') no-repeat center/cover; }
.ball { width: 26px; height: 26px; background: linear-gradient(var(--cc), white); border-radius: 50%; }
.flower { width: 60px; height: 60px; rotate: var(--deg); animation: flash 2s infinite alternate var(--state); background: url('https://638183.freep.cn/638183/small/f001.png') no-repeat center/cover; }
@keyframes flash { to { opacity: 0; } }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v2.js?v0';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1942729022' });
tz.lzRan(20, 'pa', { className: 'flower', delay: -4, duration: 8, deg: true, scale: [0.8, 1.5] });
tz.add('div', 'player', 'wrap100 rotate-ani', {style: 'bottom: 60px; display: grid; place-items: center; cursor: pointer'}).playmp3();
tz.add('div', '', 'flower', {}).to('player');
tz.lzRing(10, 'player', { className: 'ball', cc: true });
tz.bgprog().style('bottom: 20px; color: #eee');
tz.fs().style('bottom: 20px; right: 20px');
</script>

复制代码

马黑黑 · 发表于 2025-11-3 18:18

tzMaker现版（tz.v2）粒子系统更新：

一、支持粒子尺寸在设定范围内随机缩放，开关在粒子配置中设置，参阅帖子代码第16行中的 scale: [0.8, 1.5]，scale 是关键字，值可以是一个非0非空非false非null的任意值，可以是 true，也可以像帖子那样是一个两个元素的数组，只有当是两个数值元素的数组是，模块按所设定的范围随机缩小放大粒子，否则其余有效值将启用默认范围伸缩，缺省此配置模块保持粒子原始尺寸；

二、支持基于 --cc约定的CSS变量开启随机颜色赋值，开关为 cc 键名，参阅代码第19行，cc: true，键值设为 true 或其它有效值统统视为启用对 --cc 变量进行随机赋值，无效值或缺省配置不对 --cc 做任何工作；

三、支持基于 --deg 约定CSS变量开启随机角度赋值，开关为 deg 键名，参阅第16行代码，deg: true，工作原理同二所述值 cc 配置。观察帖子随机分布的花心，除了它们的尺寸各有变化（粒子缩放），还有它们的旋转角度也不尽相同（配合CSS使用的随机角度）。

上述三种机制适用于三个指令：lzRan()、lzRing()、lzRot()。