1）先到github中下載particles.js-master.zip，下載下來的文件中有一個demo案例。
2）將demo文件中的particles.min.js、style.css、app.js、particles.json copy到我們項目裏
用法：
第一步，在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文件中進行定義