svglz_fs.js 是在“全屏+音视频/CSS动画管理”模块的基础上加入基于 svg 路径动画 animateMotion 功能的标准ES模块。所加入的模块为粒子运动模块，可以从模块中剥离，若此，它就是一个与之前一直使用的全屏加音频联动管理机制的模块没有区别，做法仅仅是去掉函数的 svgSetting 参数。
一、模块约定
需要帖子创建SVG标签，里面包含一个粒子样式设计和一个运动路径，像这样——
<div id="pa">
<!-- ... 这里是帖子其它标签代码 -->
<!-- 下面是svg粒子容器 ：id自设，用defs标签装载非直接显示的内容 -->
<!-- svg viewBox 属性的宽高应与帖子容器的宽高同比 -->
<svg
id="svglz" width="100%" height="100%"
viewBox="0 00 1600 900">
<defs>
<!-- 分组标签 id 固定，不可更改，在其内设计粒子外观-->
<g
id="svgShape">
<!-- 以下元素尺寸会结合svg的 viewBox 设置影响粒子的最终大小 -->
<circle cx="10" cy="10" r="10" stroke-width="0" />
<line x1="0" y1="10" x2="-30" y2="10" stroke-width="3" />
</g>
<!-- path标签id固定，用d属性设置运动路径 -->
<path
id="motionPath" d="M0 0 Q800 1500,1600 0" />
</defs>
</svg>
</div>
上面，g 标签可以加入 fill 和 stroke 属性设置，例如，<g id="" fill="red" stroke="yellow">，如此，则其内的子标签如若不单独设置 fill 和 stroke 属性则使用 g 标签的相关属性设置，如果g标签、其内元素标签都没有 fill 和 stroke 属性，模块将使用随机颜色给每一个粒子设置fill和stroke相同的填充色和描边色。此外，还可在这里设置 stroke-width 即描边厚度，可在 g 标签统一设置，也可以单独给 g 标签的子元素分别进行设置。
二、模块导入与配置
在帖子JS代码中导入和应用模块，像下面这样——
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
var setting = {
svg: svglz, // svg元素（id名，必须）
lz: 20, // 粒子数量（正整数，缺省值20）
scale: 1.5, // 粒子伸缩（浮点数，缺省随机变化）
dur: 12, // 动画最小周期时长（数值，缺省10）
gap: 180 // 粒子错开系数（数值，0或缺省时随机，缺省值150）
};
FS(pa,ma,setting);
</script>
注意，配置中除了 svg 子项必须设置，其余均可以缺省或只设置需要设置的部分，像下面这样子——
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
FS(pa,ma,{svg: svglz});
</script>
也许中途想放弃使用svg粒子功能，那么，请把SVG标签全部删掉，然后FS函数只保留前两个参数，像这样——
<script type="module">
import { FS } from './svglz_fs.js';
FS(pa,ma);
</script>
模块的SVG粒子可以在CSS代码区给其加简单的 @keyframes 动画，通过SVG 选择器规范其下的实例化标签 use 的 animation 属性即可，这在最后给出的完整应用实例中可以看到。
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 0px; --bg: url('https://638183.freep.cn/638183/t24/w4/sea.webp') no-repeat center/cover; --ma-size: 15%; }
#ma { left: 30px; bottom: 30px; background: url('https://638183.freep.cn/638183/web/svg/p2.svg') no-repeat center/cover; }
#btnFs { right: 30px; bottom: 30px; color: #07908f; border-color: currentColor!important; }
/* 下一行设置设置svg粒子相关属性并令其运行关键帧动画 */
#mysvg use { opacity: 1; animation: flash linear 0.4s var(--delay) infinite alternate var(--state); }
@keyframes flash { to { opacity: 0.2; } }
/* 创建关键帧动画 */
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1453221722" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/01/04/62/614ade624d6dc.mp4" autoplay loop muted></video>
<div id="ma" class="brightness"></div>
<svg id="mysvg" width="100%" height="100%" viewBox="0 00 1600 900">
<defs>
<g id="svgShape" fill="white" stroke="snow">
<circle cx="10" cy="10" r="10" stroke-width="0" />
<line x1="0" y1="10" x2="-30" y2="10" stroke-width="3" />
</g>
<path id="motionPath" d="M0 0 Q800 1000,1800 450" />
</defs>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
var setting = {
svg: mysvg,
// svg元素（id名，必须）
lz: 20,
// 粒子数量（正整数，缺省值20）
//scale: 1.5, // 粒子伸缩（浮点数，缺省随机变化，这里放弃设置）
dur: 12,
// 动画最小周期时长（数值，缺省10）
gap: 180
// 粒子错开系数（数值，0或缺省时随机，缺省值150）
};
FS(pa, ma, setting);
</script>
发表于 2025-9-2 12:25
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2025-9-2 14:43
发表于 2025-9-2 14:56
楼主
然，看着赏心悦目
级别升了不止一个档