红色

马黑黑

马黑黑

完整代码：

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
   
3.         .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/red.webp') no-repeat center/cover; }
   
4.         .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; }
   
5.         .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); }
   
6.         @keyframes opacity { to { opacity: 0; } }
   
7. </style>
   
8. 
   
9. <div class="pa"></div>
   
10. 
    
11. <script type="module">
    
12.         import TZ from 'https://638183.freep.cn/638183/web/tz/tz.f.v2.min.js';
    
13.         const tz = TZ.TZ('pa');
    
14.         tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1447306956'});
    
15.         tz.add('div', 'player', 'wrap200 ma').playmp3().style('right: 60px');
    
16.         tz.lzRot(10, 'player', {className: 'clipbox'});
    
17.         tz.lzRan(60, tz.pa, { className: 'lz', delay: -4, duration: 4 });
    
18.         tz.bgprog().style('bottom: 20px; color: orangered');
    
19.         tz.fs().style('right: 20px; bottom: 20px; color: firebrick');
    
20. </script>

复制代码

马黑黑

帖子测试 tz.f.v2.min.js

该模块在上一个内测版本基础上进一步完善、优化、简化基于粒子制作的三个指令，lzRan()、lzRing()、lzRot()，即随机分布粒子、绕圈圈粒子、原地旋转粒子（从形态上看这个不算粒子，但其算法和前二者有共同之处，开发模块时将其视为粒子类）。

依然继承这样的处理思路：优先考虑帖子 <style> 标签里的设置，第二考虑配置里的设置，都没有才由模块设定粒子的背景色、宽高；粒子接收配置里的 cc 变量，若有此键值对且键值为纯数值（边界值）模块将创建CSS变量 --cc  16进制颜色随机值，这样凡针对粒子设计的CSS里用到 --cc 变量的，将得到一个随机的颜色设置；配置里其余的基于CSS的设计将得到保留。

马黑黑

声明一下：模块处于测试阶段，不敢保证没有错误和缺陷。

子楹。

若隐若现，颜色是变化的。

马黑黑

子楹。 发表于 2025-10-31 21:31
若隐若现，颜色是变化的。

红色的传播方式

红影

还真的都是红色呢，小播、进度条和闪烁粒子，色彩都那么协调

红影

马黑黑 发表于 2025-10-31 20:51
帖子测试 tz.f.v2.min.js

该模块在上一个内测版本基础上进一步完善、优化、简化基于粒子制作的三个指令 ...

这个帖子直接展示了60个lzRan()粒子的形态，分布得很随机，也很匀称呢

马黑黑

红影 发表于 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 ...

没看到绕圈圈的粒子呀，其余测试正常，祝贺

粒子大小随机的问题也值得考虑，请马老师在实现方法上解读一下tz模块提供的有关随机算法。

马黑黑

杨帆 发表于 2025-11-1 14:05
没看到绕圈圈的粒子呀，其余测试正常，祝贺

粒子大小随机的问题也值得考虑，请马老师在实现 ...

这个帖子没有用上 lzRing() 指令，但这三个指令都工作在一个基础算法之上，没问题的

杨帆

马黑黑 发表于 2025-11-1 18:24
这个帖子没有用上 lzRing() 指令，但这三个指令都工作在一个基础算法之上，没问题的

原来是该贴没有用上 lzRing() 指令，问题肯定是没有的

马黑黑

杨帆 发表于 2025-11-1 19:45
原来是该贴没有用上 lzRing() 指令，问题肯定是没有的