先看背景效果:
注:粒子的大小,颜色,和运动速度都可以自定义。背景图片是我自己找的,可根据需要替换成自己的。
背景图片:
再说过程:
第一步:下载插件
yarn add vue-particles //或者用npm i 去下
第二步:main.js 中导入并全局使用
import Vue from 'vue'
// 背景粒子特效
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
第三步:.vue文件中使用组件
以下仅为参考:
<!-- 使用vue插件制造背景效果 -->
<vue-particles
color="#00aeff"
:particleOpacity="0.7"
:particleOpacityRandom="true"
:particlesNumber="140"
shapeType="circle"
:particleSize="4"
linesColor="#8EB5C9"
:linesWidth="1"
:lineLinked="false"
:lineOpacity="0.6"
:linesDistance="120"
:moveSpeed="1"
:hoverEffect="false"
hoverMode="grab"
:clickEffect="false"
clickMode="push"
>
</vue-particles>
tip: 组件<vue-particles>最好靠前放