particles.js 是一个用于创建粒子的轻量级 JavaScript 库，通过它可以对漂浮线的数量、密度、集结点图像、走势、吸引范围、速度、颜色、引力方式、势能等选项进行配置，构建一个超炫的网页背景。但它的配置也是比较复杂的，好在官方给出了 Demo 和可视化生成配置的网站。

官方项目

生成配置

首先我们要先在官方给提供的可视化一键生成配置网站调整好你所需要的样式，然后再导出你的配置文件。
可视化一键生成配置网站

注意：别搞太多粒子数会导致浏览器卡死！！！！！

引入JS

1. 配置有了，我们还需要引用他的JS文件，根据项目的说明文档可知我们要先创建一个 app.js 的文件

particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

assets/particles.json 此项为你生成的配置文件地址

2. 在你主题的 footer.php 文件 </body> 标签前引用如下两条JS，根据加载顺序问题两项不能颠倒，app.js 是你自己创建的文件

<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script src="app.js"></script>

3. 添加背景固定样式

.particles-js-canvas-el {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1;
}

4. 最后在你要展示的地方引入如下标签，一般放在 footer 里

<div id="particles-js"></div>

效果预览