svg粒子路径动画+全屏模块
<style>.artBox { font-size: 18px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
.artBox h5 { font-size: 18px; margin: 6px 0; }
</style>
<div id="prevBox"></div>
<div class="artBox">
<p>svglz_fs.js 是在“全屏+音视频/CSS动画管理”模块的基础上加入基于 svg 路径动画 animateMotion 功能的标准ES模块。所加入的模块为粒子运动模块，可以从模块中剥离，若此，它就是一个与之前一直使用的全屏加音频联动管理机制的模块没有区别，做法仅仅是去掉函数的 svgSetting 参数。</p>
<p>一、模块约定</p>
<p>需要帖子创建SVG标签，里面包含一个粒子样式设计和一个运动路径，像这样——</p>
<div class="codebox" data-title="svg代码：">
<div id="pa">
<txt-green><!-- ... 这里是帖子其它标签代码 --></txt-green>
<txt-green><!-- 下面是svg粒子容器 ：id自设，用defs标签装载非直接显示的内容 --></txt-green>
<txt-green><!-- svg viewBox 属性的宽高应与帖子容器的宽高同比 --></txt-green>
<svg <txt-red>id="svglz"</txt-red> width="100%" height="100%" <txt-red>viewBox="0 00 1600 900"</txt-red>>
<defs>
<txt-green><!-- 分组标签 id 固定，不可更改，在其内设计粒子外观--></txt-green>
<g <txt-red>id="svgShape"</txt-red>>
<txt-green><!-- 以下元素尺寸会结合svg的 viewBox 设置影响粒子的最终大小 --></txt-green>
<circle cx="10" cy="10" r="10" stroke-width="0" />
<line x1="0" y1="10" x2="-30" y2="10" stroke-width="3" />
</g>
<txt-green><!-- path标签id固定，用d属性设置运动路径 --></txt-green>
<path <txt-red>id="motionPath"</txt-red> d="M0 0 Q800 1500,1600 0" />
</defs>
</svg>
</div>
</div>
<p>上面，g 标签可以加入 fill 和 stroke 属性设置，例如，<mark><g id="" fill="red" stroke="yellow"></mark>，如此，则其内的子标签如若不单独设置 fill 和 stroke 属性则使用 g 标签的相关属性设置，如果g标签、其内元素标签都没有 fill 和 stroke 属性，模块将使用随机颜色给每一个粒子设置fill和stroke相同的填充色和描边色。此外，还可在这里设置 stroke-width 即描边厚度，可在 g 标签统一设置，也可以单独给 g 标签的子元素分别进行设置。</p>
<p>二、模块导入与配置</p>
<p>在帖子JS代码中导入和应用模块，像下面这样——</p>
<div class="codebox" data-title="导入和配置代码：">
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
var setting = {
svg: svglz, <txt-green>// svg元素（id名，必须）</txt-green>
lz: 20, <txt-green>// 粒子数量（正整数，缺省值20）</txt-green>
scale: 1.5, <txt-green>// 粒子伸缩（浮点数，缺省随机变化）</txt-green>
dur: 12, <txt-green>// 动画最小周期时长（数值，缺省10）</txt-green>
gap: 180 <txt-green>// 粒子错开系数（数值，0或缺省时随机，缺省值150）</txt-green>
};
FS(pa,ma,setting);
</script>
</div>
<p>注意，配置中除了 svg 子项必须设置，其余均可以缺省或只设置需要设置的部分，像下面这样子——</p>
<div class="codebox" data-title="缺省配置代码：">
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
FS(pa,ma,<txt-red>{svg: svglz}</txt-red>);
</script>
</div>
<p>也许中途想放弃使用svg粒子功能，那么，请把SVG标签全部删掉，然后FS函数只保留前两个参数，像这样——</p>
<div class="codebox" data-title="剔除SVG粒子代码：">
<script type="module">
import { FS } from './svglz_fs.js';
FS(pa,ma);
</script>
</div>
<p>模块的SVG粒子可以在CSS代码区给其加简单的 @keyframes 动画，通过SVG 选择器规范其下的实例化标签 use 的 animation 属性即可，这在最后给出的完整应用实例中可以看到。</p>
<div class="codebox" data-title="帖子实例代码：" data-prev="1">
<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; }
<txt-green>/* 下一行设置设置svg粒子相关属性并令其运行关键帧动画 */</txt-green>
#mysvg use { opacity: 1; animation: flash linear 0.4s var(--delay) infinite alternate var(--state); }
@keyframes flash { to { opacity: 0.2; } } <txt-green>/* 创建关键帧动画 */</txt-green>
</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, <txt-green>// svg元素（id名，必须）</txt-green>
lz: 20, <txt-green>// 粒子数量（正整数，缺省值20）</txt-green>
<txt-green>//scale: 1.5, // 粒子伸缩（浮点数，缺省随机变化，这里放弃设置）</txt-green>
dur: 12, <txt-green>// 动画最小周期时长（数值，缺省10）</txt-green>
gap: 180 <txt-green>// 粒子错开系数（数值，0或缺省时随机，缺省值150）</txt-green>
};
FS(pa, ma, setting);
</script>
</div>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 模块升级，创新之举，经典分享{:4_191:} 头几款点不动，还以为浏览器出问题了呢，最后点开了，很漂亮。 这么快就封装起来，而且还可以从模块中剥离，这个太方便了。
缺省时的配置更是简单到极致，太厉害了{:4_199:} 这个实例代码和前面那个帖子还是不同的，就算坦克没变，路径至少变了{:4_187:} 封装好的，使用时只要按约定方式填好数值即可，真的太方便了{:4_199:} 红影 发表于 2025-9-2 15:12
封装好的，使用时只要按约定方式填好数值即可，真的太方便了
懂得实现原理，整个数据会容易一些 红影 发表于 2025-9-2 15:10
这个实例代码和前面那个帖子还是不同的，就算坦克没变，路径至少变了
一切都可以改变，况且，这次不是坦克 红影 发表于 2025-9-2 15:08
这么快就封装起来，而且还可以从模块中剥离，这个太方便了。
缺省时的配置更是简单到极致，太厉害了{:4_19 ...
这算是三合一吧
SVG路径动画还是挺灵活的，不能用百分比表示距离的效果，它目前是我认为无法取代的实现方式 梦江南 发表于 2025-9-2 14:56
头几款点不动，还以为浏览器出问题了呢，最后点开了，很漂亮。
不是所有的代码都可以运行，实际上，鼠标指针移动到“预览”按钮的时候它会弹出一个提示，可以从中知道它是否锁定了预览。
现在我修改了一下代码展示模块，不提供预览的代码将不再出现“预览”按钮，硬刷新后就可以了 杨帆 发表于 2025-9-2 14:43
模块升级，创新之举，经典分享
{:4_190:} 好细致的教程，把各种情况全部都罗列在内了。。
如果不要粒子也可以剔除。
这个使用范围更广泛 <svg id="mysvg" width="100%" height="100%" viewBox="0 00 1600 900">
这里的宽高之比为16：9，无论多大的图片背景粒子范围宽高都以这个比例显示。。完美，这粒子放到大背景页面也不会变形。。
前两个不是00么，怎么多了一个零了 画面更浪漫 ，这个背景收了。。美得极具质感。。。
这次用了很久之前用代码写的玉镯图案做小播。。大爱。。
粒子形状变了，今天的更像是棒棒糖，或者是一群小蝌蚪
闪烁错落延迟顺着设好的路径飞舞，流畅自{:4_188:}然，看着赏心悦目 花飞飞 发表于 2025-9-2 20:00
画面更浪漫 ，这个背景收了。。美得极具质感。。。
这次用了很久之前用代码写的玉镯图案做小播。。大爱。 ...
直线朝前的是坦克，朝后的是火箭 花飞飞 发表于 2025-9-2 19:55
这里的宽高之比为16：9，无论多大的图片背景粒子范围宽高都以这个比例显示。。完美，这粒子放到大背景页 ...
00 = 0，错也不错 花飞飞 发表于 2025-9-2 19:45
好细致的教程，把各种情况全部都罗列在内了。。
如果不要粒子也可以剔除。
这个使用范围更广泛
反正也不算浪费：模块就是提供各种可能，用那种可能就用哪种，不用就留着 马黑黑 发表于 2025-9-2 21:45
直线朝前的是坦克，朝后的是火箭
{:4_173:}级别升了不止一个档 马黑黑 发表于 2025-9-2 21:46
00 = 0，错也不错
嗯哪。。就玲玲好了 马黑黑 发表于 2025-9-2 21:46
反正也不算浪费：模块就是提供各种可能，用那种可能就用哪种，不用就留着
小播触碰变色和视频选择就是先例。。。
可以灵活拆卸，组装