particles.js给网站增加飘雪星空气泡等自定义任何形状的动态背景

项目地址：particles.js 在线制作和演示地址：particles.js 演示

具体方法：

懒得自己部署的直接在particles.js 演示的站点，自己自定义设置一个动态背景，粒子参数等几乎所有地方都可以自定义，自己花点时间尝试研究下，然后点最下方的Download json下载个配置文件

然后我以wordpress子比主题为例，实现这个效果的方法如下：

要在子比主题中集成 particles.js 的飘雪效果，可以借助主题提供的自定义代码区域。以下是详细步骤：

1.自定义头部 HTML 代码：
您需要在 HTML 中包含 particles.js 库。在子比主题的“自定义头部 HTML 代码”区域中添加以下代码：

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

https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js这个源自particles.js 项目官方的 ,也可以上传部署到自己服务器上 ，懒得折腾就直接用。

2.自定义 JavaScript 代码：
在这里，您需要对 particles.js 进行初始化。根据主题的说明，此部分无需 <script> 标签，只需输入以下 JavaScript 代码：

window.onload = function() {
  particlesJS('particles-js', {
    "particles": {
      "number": {
        "value": 120,
        "density": {
          "enable": true,
          "value_area": 1443.0708547789707
        }
      },
      "color": {
        "value": "#fafafa"
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": "#000000"
        },
        "polygon": {
          "nb_sides": 8
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 0.5,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 10,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 40,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": false,
        "distance": 112.2388442605866,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 2
      },
      "move": {
        "enable": true,
        "speed": 1.603412060865523,
        "direction": "none",
        "random": true,
        "straight": false,
        "out_mode": "bounce",
        "bounce": false,
        "attract": {
          "enable": false,
          "rotateX": 400.8530152163807,
          "rotateY": 881.8766334760375
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "bubble"
        },
        "onclick": {
          "enable": true,
          "mode": "repulse"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 0.5
          }
        },
        "bubble": {
          "distance": 400,
          "size": 4,
          "duration": 0.3,
          "opacity": 1,
          "speed": 3
        },
        "repulse": {
          "distance": 200,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true
  });
};

其实这一步就是使用 刚才自定义下载后的JSON 配置初始化 particles.js，由于 WordPress 环境中不能直接使用服务器端读取本地文件的功能，你需要将 JSON 文件的内容复制到 JavaScript 中，然后进行配置。这段js里的主要内容其实都是之前下载的JSON的代码。初始化JS不会的丢给AI。

3.自定义 CSS 样式：
确保用于 particle-js 的容器在页面中正确显示，并设置全屏效果。在“自定义 CSS 样式”中添加：

#particles-js {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 确保在背景显示 */
}

4.添加粒子容器：
您需要一个 <div> 元素用作粒子容器。在“自定义底部HTML代码”或者直接在主题模板中添加如下代码：

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

完成这些步骤后，保存更改。访问您的网站时，应该可以看到配置的粒子效果。

案例地址：ninept钢琴谱 如果你想拥有跟这个案例一模一样的背景效果，直接复制上面代码即可，连自定义的JSON都不用搞。建议还是自己自定义一个喜欢的粒子背景。案例这个页面其实增加了全部页面透明效果，所以才能全部都看到粒子背景，具体增加全页面背景效果的方法和代码，我在其他文章里有提到过，可以搜索一下.