vuejs粒子动画特效 npm安装插件vue-particles（particles.js） - 代码篇

---

1. npm 安装插件vue-particles

npm install vue-particles --save-dev  
或者
cnpm install vue-particles --save-dev  

---

2. 效果图：

---

3. 代码截图：

---

4. 代码示下：

<!-- 粒子动画 区域  -->
<vue-particles
   id="particles-js"    	/* 此处可以手动定义id为默认值particles-js，也可以不写 */
/* 圆点设置：				颜色、透明度、数量、外形、大小 */
   color="#fff"
   :particleOpacity="0.3"
   :particlesNumber="30"
   shapeType="circle"
   :particleSize="6"
/* 线的设置：				颜色、线宽、、透明度、最大连接距离、移动速度，等等 */
   linesColor="#fff"
   :linesWidth="1"
   :lineLinked="true"
   :lineOpacity="0.5"
   :linesDistance="200"
   :moveSpeed="2"
   :hoverEffect="true"
   hoverMode="grab"
   :clickEffect="true"
   clickMode="push"
   class="lizi"
>

---

5. 附件 · 文章阅读：

1. demo
2. 黑客帝国粒子动画

---

以上就是关于 “ vuejs粒子动画特效 npm安装插件vue-particles（particles.js） - 代码篇 ” - 代码篇的全部内容。