朝圣道

马黑黑 · 发表于 2025-10-30 20:45

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

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

x

马黑黑 · 发表于 2025-10-30 20:45

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/iud.webp') no-repeat center/cover; }
.clipbox { position: absolute; width: 100%; height: 100%; clip-path: path('M70 0 A1 0.6 0 0 0 130 00 L100 100 L70 0'); }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.f.min.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=459944758'});
tz.add('div', 'player', 'wrap200 ma').playmp3().style('top: 10%');
tz.lzRot(7, 'player', {className: 'clipbox'});
tz.bgprog().style('bottom: 20px; color: #fff');
tz.fs().style('right: 20px; bottom: 20px; color: #eee');
</script>

复制代码

子楹。 · 发表于 2025-10-30 20:54

沙发欣赏学习

马黑黑 · 发表于 2025-10-30 20:55

本帖最后由马黑黑于 2025-10-30 20:57 编辑

测试模块：tz.f.min.js

更新粒子系统相关指令 lzRan、lzRing、lzRot 处理粒子元素CSS样式渲染的逻辑：粒子 background 属性先考虑帖子 <style> 样式标签的设定，没有相关设定的看配置设定，没有设定配置的随机。除 background 属性外，width、height 属性照此规则。另，粒子支持对 animation-duration、animation-delay 的配置，例如，配置中若出现：

duration : 20,
delay: -20,

则将设置css属性 animation-duration、animation-delay，上述配置将作为边界数值纳入计算。

更换逻辑后的三个指令将以新的方式工作，粒子的可操作性有所提升。但现在是测试阶段，不可预测的错误难以避免。