什么是粒子特效生成器？

为您的网站或应用设计和预览粒子动画。设置粒子数量、速度、大小、颜色、形状、交互行为和物理参数，创建雪花、纸屑、萤火虫或银河等效果。导出配置为可直接使用的代码。

底层引擎是 tsParticles,所以复制的 JSON 配置可以直接放进 React、Vue 或原生项目里使用。鼠标悬停与点击交互（排斥、抓取、放大、推动、移除）、透明度渐变以及颜色（色相）动画都开箱即用,HTML 导出还会通过 CDN 自动引入引擎,粘贴到静态页面就能跑,不需要打包工具。你还可以把实时预览录制成动态 GIF,随处分享这个效果。

使用方法

1. 选择预设效果（雪花、纸屑、萤火虫、气泡、银河、网络、烟花、火焰、烟雾），或从零开始创建。
2. 微调粒子属性：数量、速度、大小范围、颜色、形状、透明度以及重力和弹性等物理参数。
3. 实时预览动画效果，然后复制 tsParticles JSON 配置、导出独立的 HTML 代码片段，或把预览录制成动态 GIF。

何时使用

• 给节日活动页或产品发布页加一层飘雪或撒花粒子。
• 在请设计师介入前,自己先给 SaaS 主页 Hero 区拼一个动态背景。
• 为作品集首页或游戏菜单做一个银河、萤火虫风格的背景。

结果

一位网页开发者选择雪花预设，将粒子数量增加到 200，添加轻微的风力漂移效果，然后复制 JSON 配置为节日着陆页添加冬季氛围。

常见问题

导出的 JSON 能不能在任何前端框架里用?

可以。配置完全兼容 tsParticles,官方提供了 React、Vue、Svelte、Angular 和原生 JS 的封装包。装上对应的 wrapper,把 JSON 作为 options 传进去,效果跟这里的预览完全一致。

粒子数量多少会开始卡顿?

现代笔记本上 200 到 400 个粒子能稳定跑 60 帧。超过 500 时中端手机会开始掉帧。星形和多边形比圆形更耗性能,因为渲染路径更复杂。给手机用建议保持在 100 到 150 之间,并关掉交互。

为什么导出 HTML 后动画看起来不太一样?

HTML 片段会把画布拉伸到父容器的尺寸。如果你把它放进一个很小的 div,粒子就会挤在一起。给外层包一个固定高度的容器(比如 100vh 或 400px),画布就会自适应。

可以用自定义图片做粒子形状吗?

UI 里没开放这个选项,但 tsParticles 引擎本身支持。导出 JSON 后,改一下 shape.options.image,填入你的 PNG 或 SVG 地址。图片会按每个粒子分配到的尺寸和透明度渲染。

粒子动画会拉低页面性能评分吗?

引擎本身大约 30 到 80 KB(gzip 后),加上画布持续重绘。想兼顾 Lighthouse 分数,建议手机端降低粒子数并关闭交互。让引擎在 Hero 区可见后再懒加载,可以保住 LCP 指标。

相关工具