图上那些类似于星座图的点和线
是由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，可能会解决问题
总之在使用的时候，通常情况下要使用定位来使这个特效作为我们的背景特效
.