【提示】插件若有更新，将第一时间发布在 http://mhh.52qingyin.cn/art/show ... rt=mahei_1694186574，若访问该文档，可按 Ctrl + F5 查看更新状况。
一、配置代码
<script>
let jf = document.createElement('script');
jf.src = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
document.body.appendChild(jf);
jf.onload = () => {
H5lz({
papa: '#mydiv', /* 指定粒子的父元素 */
total: 100, /* 粒子数量 */
size: {width: 15, height: 15}, /* 粒子宽高 */
shape: {background: '', borderRadius: ''}, /* 粒子背景和圆角（缺省或空值时插件自行配置） */
maxTime: 24, /* 粒子运动最大周期时长 */
offset: {x: 0, y: 0}, /* 粒子运动横、纵偏移量 */
ani: 'toBottom', /* 粒子运动名称（由插件提供，大小写敏感） */
css: 'opacity: .7;', /* 粒子特殊CSS样式，缺省或空值放弃设置 */
});
};
</script>
二、配置说明
配置在资源文档加载后由 H5lz({}) 进行配置，配置代码写在花括号内，共八个参数：
① papa
指定需要显示粒子的元素，值为字符串值（需要引号包裹值，下同），具体值为 id 或 class 表达法，例如：
<div id="mybox"></div>
则，papa 配置这么写：
papa: '#mybox',
而：
<div class="mybox"></div>
则，papa 这么配置：
papa: '.mybox',
注意，当使用 class 时，插件只作用于第一个 class=“xx" 的元素。
当 papa 参数未指定，插件将作用于 body，且当 body 的高度低于浏览器视口高度是，插件将对 body 做如下设置：其一，body 的高度为视口高度；其二，滚动条设置为 hidden。
② total
设置粒子总数，值为数值（不能用引号包裹值，下同）。缺省将由插件自行设置。由于使用关键帧驱动，粒子总数对资源的消耗不明显，可以根据需要大胆设置，但不应过分。
③ size
粒子尺寸，值为 Object 对象，需要花括号包裹个键值对（下同）。键值对共两组，健名分别是 width 和 height，分别指向粒子的宽、高，键值为数值，键值对之间用小角逗号隔开：
size: {width: 10, height: 10},
缺省则由插件自行配置。
④ shape
配置粒子形状，值为 Object 对象，共两个键值对，健名是 background 和 borderRadius（注意大小写）。其中，background 是粒子的背景设置，支持颜色表达、渐变背景、图片背景；borderRadius 对应 CSS的 border-radius 属性。键值均为字符串值。
⑤ maxTime
设置关键帧动画最高周期运行时长，对应的是 duration 属性，数值。设置此值，每一个粒子的一个运动周期都将在它的一半到它的本值之间选择一个数值。
⑥ offset
粒子运动偏移量配置，值为 Object 对象，两个子对象，x 指水平方向偏移量，作用于上、下运动的粒子；y 值垂直方向偏移量，作用于左、有运动的粒子。x、y 偏移量值为数值，支持正、负数。
偏移量对粒子运动的作用，表现在粒子朝东、南、西、北运动是或向上、向下、向左、向右偏移。
⑦ ani
指定动画方向，字符串值，由插件指定，当前可选值六个——
其一，自上而下：toBottom /* 【例】ani: 'toBottom', */
其二，自下而上：toTop /* 【例】ani: 'toTop', */
其三，自左向右：toRight /* 【例】ani: 'toRight', */
其四，自右向左：toLeft /* 【例】ani: 'toLeft', */
其五，由里往外：c2Out /* 【例】ani: 'c2Out', */
其六，由外往里：out2C /* 【例】ani: 'out2C', */
⑧ css
配置特殊需求的粒子CSS样式，使用CSS语法书写，所配置的属性应避免与粒子前述相关设置冲突。例如，设置透明度和阴影：
css: 'opacity: .75; box-shadow: inset 0 0 8px #fff;',
CSS语句可以分行写，用反引号包裹CSS语句：
css: `
opacity: .75;
box-shadow: inset 0 0 8px #fff;
`,
最后再次强调：给参数赋值时，对象值要使用花括号 {} 将键值对群包裹起来，值为字符串要用小角引号 '' 或 "" 包裹起来，值为数值不要用引号、不要使用单位。
三、粒子交互
其实就是粒子的运动与暂停，它依赖于 CSS 变量 --state，该变量的 paused 和 running 值将使得例子暂停、运动。
四、应用实例
① 赵越 - 纳裕
② Strobe
③ 殊途同归
④ 旋涡
发表于 2023-9-15 10:58
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
