圖上那些類似於星座圖的點和線
是由vue-particles生成的，不僅自己動，而且能與用戶鼠標事件產生互動。
是非常炫的一種動態特效
可以在Vue項目中使用，需要安裝第三方依賴
使用步驟
1. 安裝
npm install vue-particles --save-dev
復制代碼或者
npm i vue-particles
復制代碼2. 引用
在main.js中引用
import VueParticles from 'vue-particles' Vue.use(VueParticles) 復制代碼3. 使用
可以直接在vue文件中使用如下標簽
<template>
<div id="app"> <vue-particles color="#fff" :particleOpacity="0.7" :particlesNumber="60" shapeType="circle" :particleSize="4" linesColor="#fff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="2" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" > </vue-particles> </div> </template> 復制代碼然后就會顯示效果了
4. 配置
color: String類型默認'#dedede'。粒子顏色。particleOpacity: Number類型默認0.7。粒子透明度。particlesNumber: Number類型默認80。粒子數量。shapeType: String類型默認'circle'， 可用的粒子外觀類型有："circle","edge","triangle", "polygon","star"。particleSize: Number類型默認80。單個粒子大小。linesColor: String類型默認'#dedede'。線條顏色。linesWidth: Number類型默認1。線條寬度。lineLinked: 布爾類型默認true。連接線是否可用。lineOpacity: Number類型默認0.4。線條透明度。linesDistance: Number類型默認150。線條距離。moveSpeed: Number類型默認3。粒子運動速度。hoverEffect: 布爾類型默認true。是否有hover特效。hoverMode: String類型默認true。可用的hover模式有: "grab", "repulse", "bubble"。clickEffect: 布爾類型默認true。是否有click特效。clickMode: String類型默認true。可用的click模式有: "push", "remove", "repulse", "bubble"。
如果想做背景圖片的話，可以給這個標簽加一個class，直接添加背景圖
5. 小問題
通常使用我們都是直接引入這個標簽，
然后在這個標簽后面放上自己的內容
但是，這樣的話，是無法將粒子特效設置為背景的，而是將你自己寫的內容推了下去
上面是粒子特效，下面是你的內容，所以是無法設置為背景的
這時候我們可以把這個粒子特效標簽設置定位 position:absolute
但是有時候它會遮擋住我們的一些元素，所以可以把絕對定位換成position:fixed，可能會解決問題
總之在使用的時候，通常情況下要使用定位來使這個特效作為我們的背景特效
.