红色
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/red.webp') no-repeat center/cover; }
.clipbox { position: absolute; width: 100%; height: 95%; background: red; clip-path: path('M70 0 A1 0.6 0 0 0 130 0 L100 90 L70 0'); opacity: .25; }
.lz { width: 20px; height: 20px; background: linear-gradient(red, white); border-radius: 50%; opacity: 1; animation: opacity 2s infinite alternate var(--state), rot linear 4s infinite var(--state); }
@keyframes opacity { to { opacity: 0; } }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.f.v2.min.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1447306956'});
tz.add('div', 'player', 'wrap200 ma').playmp3().style('right: 60px');
tz.lzRot(10, 'player', {className: 'clipbox'});
tz.lzRan(60, tz.pa, { className: 'lz', delay: -4, duration: 4 });
tz.bgprog().style('bottom: 20px; color: orangered');
tz.fs().style('right: 20px; bottom: 20px; color: firebrick');
</script> 完整代码：
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/red.webp') no-repeat center/cover; }
.clipbox { position: absolute; width: 100%; height: 95%; background: red; clip-path: path('M70 0 A1 0.6 0 0 0 130 0 L100 90 L70 0'); opacity: .25; }
.lz { width: 20px; height: 20px; background: linear-gradient(red, white); border-radius: 50%; opacity: 1; animation: opacity 2s infinite alternate var(--state), rot linear 4s infinite var(--state); }
@keyframes opacity { to { opacity: 0; } }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.f.v2.min.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1447306956'});
tz.add('div', 'player', 'wrap200 ma').playmp3().style('right: 60px');
tz.lzRot(10, 'player', {className: 'clipbox'});
tz.lzRan(60, tz.pa, { className: 'lz', delay: -4, duration: 4 });
tz.bgprog().style('bottom: 20px; color: orangered');
tz.fs().style('right: 20px; bottom: 20px; color: firebrick');
</script>
帖子测试 tz.f.v2.min.js
该模块在上一个内测版本基础上进一步完善、优化、简化基于粒子制作的三个指令，lzRan()、lzRing()、lzRot()，即随机分布粒子、绕圈圈粒子、原地旋转粒子（从形态上看这个不算粒子，但其算法和前二者有共同之处，开发模块时将其视为粒子类）。
依然继承这样的处理思路：优先考虑帖子 <style> 标签里的设置，第二考虑配置里的设置，都没有才由模块设定粒子的背景色、宽高；粒子接收配置里的 cc 变量，若有此键值对且键值为纯数值（边界值）模块将创建CSS变量 --cc16进制颜色随机值，这样凡针对粒子设计的CSS里用到 --cc 变量的，将得到一个随机的颜色设置；配置里其余的基于CSS的设计将得到保留。 声明一下：模块处于测试阶段，不敢保证没有错误和缺陷。 若隐若现，颜色是变化的。 子楹。 发表于 2025-10-31 21:31
若隐若现，颜色是变化的。
红色的传播方式 还真的都是红色呢，小播、进度条和闪烁粒子，色彩都那么协调{:4_187:} 马黑黑 发表于 2025-10-31 20:51
帖子测试 tz.f.v2.min.js
该模块在上一个内测版本基础上进一步完善、优化、简化基于粒子制作的三个指令 ...
这个帖子直接展示了60个lzRan()粒子的形态，分布得很随机，也很匀称呢{:4_187:} 红影 发表于 2025-10-31 22:55
还真的都是红色呢，小播、进度条和闪烁粒子，色彩都那么协调
目前，仅一个简单的指令语句，像
tz.lzRan(60, tz.pa, { className: 'lz', delay: -4, duration: 4 });
这样，就能创建出自己通过CSS预定义的粒子，而且还能自适应帖子宽高变化。
曾想过粒子大小随机的问题，实现方法不复杂，这应该是下一步再考虑的问题，也许也不考虑，毕竟，做更理想的粒子，应是帖子制作者精心设计的劳动，tz模块提供有相关随机算法。 红影 发表于 2025-10-31 22:58
这个帖子直接展示了60个lzRan()粒子的形态，分布得很随机，也很匀称呢
是的，这个随机分布层面，刚刚还在修改过算法，如果你在40分钟以前打开过帖子，现在需要硬刷新才能看到全屏也是自适应分布的。 马黑黑 发表于 2025-10-31 23:03
目前，仅一个简单的指令语句，像
tz.lzRan(60, tz.pa, { className: 'lz', delay: -4, duration ...
还是要自己动一下脑子的 马黑黑 发表于 2025-10-31 20:52
声明一下：模块处于测试阶段，不敢保证没有错误和缺陷。
先收藏代码， 小辣椒 发表于 2025-10-31 23:16
先收藏代码，
这个也可以使用的。将来，也可以换上最新的模块链接 小辣椒 发表于 2025-10-31 23:13
还是要自己动一下脑子的
那是自然 点赞！马老师不断的有新代码奉献给大家！ 寒冬残荷 发表于 2025-11-1 10:12
点赞！马老师不断的有新代码奉献给大家！
来来去去都是那么几个 马黑黑 发表于 2025-10-31 23:03
目前，仅一个简单的指令语句，像
tz.lzRan(60, tz.pa, { className: 'lz', delay: -4, duration ...
没看到绕圈圈的粒子呀，其余测试正常，祝贺{:4_199:}
粒子大小随机的问题也值得考虑，请马老师在实现方法上解读一下tz模块提供的有关随机算法。{:4_180:} 杨帆 发表于 2025-11-1 14:05
没看到绕圈圈的粒子呀，其余测试正常，祝贺
粒子大小随机的问题也值得考虑，请马老师在实现 ...
这个帖子没有用上 lzRing() 指令，但这三个指令都工作在一个基础算法之上，没问题的 马黑黑 发表于 2025-11-1 18:24
这个帖子没有用上 lzRing() 指令，但这三个指令都工作在一个基础算法之上，没问题的
原来是该贴没有用上 lzRing() 指令，问题肯定是没有的 杨帆 发表于 2025-11-1 19:45
原来是该贴没有用上 lzRing() 指令，问题肯定是没有的
{:4_190:}
页:
[1]
2