vue插件-粒子动态背景
作者:互联网
安装vue-particles
cnpm install vue-particles
全局配置vue-particles[ 在main.js里面:]
import VueParticles from 'vue-particles' Vue.use(VueParticles)使用vue-particles【 在vue文件template标签中】
<vue-particles id="particles-js" /* 此处可以手动定义id为默认值particles-js,也可以不写 */ /* 圆点设置: 颜色、透明度、数量、外形、大小 */ 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" class="lizi" //此处又定义了一个类class,也可以通过它设置粒子样式 > </vue-particles>
具体参数配置 根据id调整样式 vue-particles有一个id为默认为particles-js,可以根据这个id来设置样式
#particles-js{ width: 100%; height: calc(100% - 100px); position: absolute; //设置absolute,其他DIV设置为relative,这样这个例子效果就作为背景 }
根据自定义的class名称lizi设置样式
标签:插件,vue,粒子,样式,js,particles,设置,id 来源: https://www.cnblogs.com/qiuqiu001/p/15471772.html