particles.js中文开发手册-CSDN博客

本文链接：https://blog.csdn.net/sunsineq/article/details/113023419

官方github：https://github.com/VincentGarreau/particles.js/

demo制作器，注意可能需要翻墙

https://codepen.io/VincentGarreau/pen/pnlso 这个可以把你制作的demo导出

http://vincentgarreau.com/particles.js/这个可以用来尝试配置不同效果

`使用方法`

加载particle.js并配置粒子：

index.html

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

<script src="particles.js"></script>

app.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

particles.json就是主要的配置文件注意一下文件顺序，不然会出现问题
实际demo

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>particles.js</title>

      <link rel="stylesheet" href="style.css">
 
</head>

<body>

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

  
</body>
 <script src='particles.min.js'></script>  这个玩意需要放在下面
  <script src="index.js"></script>
</html>

如有需要下载demo请到QQ群，黑色原子效果很科幻，还不错

根据css颜色和json配置文件，就打造属于自己的科幻效果

`参数`

键值	参数选项/ 说明	实例
`particles.number.value`	number 数量	`40`
`particles.number.density.enable`	boolean	`true` / `false`
`particles.number.density.value_area<`