使用Particles.js製作出仿乎超炫粒子動態背景效果程式碼介紹

本文跟大家分享Particles.js基於Canvas畫布創建粒子顆粒效果，程式碼非常簡單，需要的朋友參考下吧

好久沒登入知乎，發現他們的登入頁面粒子動態效果蠻炫的，查一下程式碼用了Particles.js基於Canvas畫布創建粒子顆粒效果。

上圖

上圖: 

感覺有比格，就照著弄了一個,玩玩。

github: https://github.com/VincentGarreau/particles.js/

##操作過程：

網路上有基本流程，可以參考一下，但直接用在登入頁面會有小bug，需要調整下。

1、先在頁面中引入particles.js檔案。

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

2、在頁面中使用一個p來作為放置粒子的容器。 [一般放最底部，css 需要改進一下]

<p id="particles"></p>
<style type="text/css">
 #particles {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; //这个z-index 要是不设置 会对登录表单的点击产生干扰，会去抢风头，不好好做一个安静的背景。
  background-color: #26AFE3;
 }
</style>

3、載入設定檔:  網上講 用load()方法 還要弄個設定的json文件，光路徑 就搞殘了我。

                  參考的官方demo 

           ub 官網頁面就有詳情。控製粒子數量 運動速度 什麼的

   particles 用起來還是有點問題的，在chrome 下載檔案後再切換到這個頁面 就殘廢了。等解決方法。

以上是使用Particles.js製作出仿乎超炫粒子動態背景效果程式碼介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！