GitHub-教程-下载
1）先到github中下载particles.js-master.zip，下载下来的文件中有一个demo案例。
2）将demo文件中的particles.min.js、style.css、app.js、particles.jsoncopy到我们项目里
用法：
第一步，在html中引入particles.min.js、style.css、app.js脚本文件，注意引用地址一定要确保无误
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>超炫酷粒子背景</title><link rel="stylesheet" href="../css/style.css"></head><body><script src="../lib/particles/particles.min.js"></script><script src="../js/app.js"></script></body></html>
第二步，修改我们引入的app.js文件，下面是我们copy进来时的内容，但由于我复制particles.json到项目里后，particles.json文件的存放目录发生的改变，所以需要修改particles.json的引用路径，即修改assets/particles.json
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */particlesJS.load('particles-js', 'assets/particles.json', function() {console.log('callback - particles.js config loaded');});
改
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */particlesJS.load('particles-js', 'particles.json', function() {console.log('callback - particles-js config loaded');});
第三步，在html中定义一个<div id="particles-js"></div>作为particles.js的容器，然后就可以在它的后面定义我们自己的页面内容了
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>超炫酷粒子背景</title><link rel="stylesheet" href="../css/style.css"></head><body><!-- particles.js container --><div id="particles-js"></div><!-- 我们自己定义的内容 --><div></div><script src="../lib/particles/particles.min.js"></script><script src="../js/app.js"></script></body></html>
ok，完成这些步骤之后，我们就可以查看一下效果了。
我发现已经产生一定的效果了，但很明显，这并不是我们想要的效果，仅仅只是上面那部分产生效果而已，而我们的内容区并没有该效果。这是因为<div id="particles-js"></div>把我们定义的内容推下去了，所以我们的内容区没有该效果。所以还需要我们做一步修改。
第四步，修改style.css文件。打开引入的style.css文件，在#particles-js{}中添加position: fixed;样式
/* ---- particles.js container ---- */#particles-js{position: fixed; /*添加这一行*/width: 100%;height: 100%;/*背景颜色*//*background-color: #b61924;*//*背景图片*/background: url("../image/9.png") !important;background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;}
ok，再来查看一下效果，我们想要的效果出来了。这一次粒子背景真正作用在我们的内容中了
无意间发现particles.js会与一些ui框架的css样式发生冲突，所以需要再次修改particles.js插件的style.css文件。只保留下面这部分，其它的全部删除掉
style.css
/* ---- particles.js container ---- */#particles-js{position: fixed; /*添加这一行*/width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;}
提示：
particles粒子背景样式是可以自定义的，具体可以根据GitHub上的options选项在我们的particles.json文件中进行定义
