无需登录 数据私有 本地保存

Particles.js 配置生成器 - 粒子背景可视化定制

动画 设计工具 Particles.js 粒子 背景 配置
145
0
0
0
开始前请确保您已打开 Particles.js 配置生成器页面，所有操作均在浏览器中完成，无需安装任何软件。
1
选择预设效果或从零开始

页面顶部提供了 8 种预设效果：Default、Snow、Night Sky、Fireflies、Bubbles、Neon、Lines、Confetti。点击任意预设即可快速加载对应的参数配置并立即在预览区域看到效果。如果您希望从零开始定制，可以选择 Default 预设作为基础，然后逐步调整各项参数。也可以点击随机化按钮，让系统自动生成一组随机参数作为起点。

2
调整粒子基础属性

在配置面板中找到粒子数量滑块，拖动调整粒子的密度。数量越少性能越好，但视觉效果越简约；数量越多效果越丰富，但可能影响页面性能。接着设置粒子大小范围，最小值和最大值之间的差距越大，粒子的大小变化越明显，视觉层次感越强。然后调整透明度和速度参数，透明度控制粒子的可见程度，速度控制粒子飘动的快慢。移动方向可以设置为 none（静止）、top、top-right、right、bottom-right、bottom、bottom-left、left 或 top-left。

3
定制粒子外观

在形状设置区域，从 Circle、Square、Triangle、Polygon、Star 中选择您喜欢的粒子形状。如果选择了 Polygon，可以进一步设置边数（如 6 创建六边形）；选择 Star 时可以设置角数（如 5 创建五角星）。在颜色设置区域，选择单色模式并指定一种颜色，或选择调色板模式并添加多种颜色。您可以继续配置粒子描边，启用描边并设置描边颜色和宽度，为粒子增添轮廓效果。最后设置背景颜色，确保与粒子颜色形成良好的视觉对比。

4
配置粒子连线

在连线设置区域，首先启用连线功能（将 enable 设置为 true）。然后调整连线距离参数，该值决定了多远距离内的粒子会被连线——值越大连线越密集，值越小连线越稀疏。设置连线颜色，建议与粒子颜色有所区别以便清晰区分。调整连线宽度和透明度，宽度影响线条的视觉粗细，透明度控制线条的可见程度。如果您追求简洁的效果，可以适当增大连线距离并降低线条透明度，创造出若隐若现的连线效果。

5
设置鼠标交互效果

在交互设置区域，您可以分别配置悬停效果和点击效果。对于悬停效果，Grab 模式会在鼠标与附近粒子之间产生临时连线，适合连接感强的场景；Bubble 模式会让鼠标附近的粒子变大，产生气泡感；Repulse 模式则会将附近的粒子推开，产生排斥效果。对于点击效果，Push 模式会在点击位置生成新粒子；Remove 模式会删除点击位置附近的粒子；Bubble 和 Repulse 模式分别产生膨胀和排斥效果。建议根据页面的整体交互设计选择合适的组合。

6
导出配置并应用到项目

在预览效果满意后，点击「复制配置」按钮将 JSON 配置复制到剪贴板，然后粘贴到您的项目代码中。您也可以点击「下载配置」按钮将配置保存为 .json 文件。在项目中使用时，将配置传递给 Particles.js 的 init 方法即可。工具还支持导入已有配置，点击「导入配置」按钮选择本地的 .json 文件即可加载并进行二次编辑。所有导出的配置均完全兼容标准 Particles.js 库，无需任何格式调整。

🔧 相关工具