夜之花
本帖最后由 马黑黑 于 2025-11-3 17:58 编辑 <br /><br /><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: });
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> 帖子代码
<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: });
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>
tzMaker现版（tz.v2）粒子系统更新：
一、支持粒子尺寸在设定范围内随机缩放，开关在粒子配置中设置，参阅帖子代码第16行中的 scale: ，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()。 美！除了美就剩下更美了{:4_178:} 樵歌 发表于 2025-11-3 18:31
美！除了美就剩下更美了
其实还有醉美{:4_170:} 效果漂亮，学生已交作业，请老师指正{:4_190:} 朵拉 发表于 2025-11-3 22:00
效果漂亮，学生已交作业，请老师指正
{:4_190:} 代码简约，效果精美，谢谢老师经典示范{:4_191:} 杨帆 发表于 2025-11-3 23:12
代码简约，效果精美，谢谢老师经典示范
{:4_190:} 粒子随机分布，而且可以是画的也可以直接用图片。黑黑讲解之后就有帖子演示，真好{:4_199:} 其他粒子是随机的，小播里的那个位置是固定的呢。
夜之花昙花只在夜里绽放，粒子的花却是随时隐现地绽放呢{:4_204:} 红影 发表于 2025-11-4 22:55
粒子随机分布，而且可以是画的也可以直接用图片。黑黑讲解之后就有帖子演示，真好
{:4_191:} 红影 发表于 2025-11-4 22:56
其他粒子是随机的，小播里的那个位置是固定的呢。
夜之花昙花只在夜里绽放，粒子的花却是随时隐现地绽放呢 ...
{:4_173:} 红影 发表于 2025-11-4 22:56
其他粒子是随机的，小播里的那个位置是固定的呢。
夜之花昙花只在夜里绽放，粒子的花却是随时隐现地绽放呢 ...
彼此分开设置。lzRan，lzRing, lzRot 三个指令均支持随机设置缩放、颜色等 来欣赏马老师的精品佳作，祝您创作如春泉涌流不息！
页:
[1]