<template>
<div class="login-jk">
<vue-particles>
<!-- 粒子颜色 -->
color="#409efe"
<!-- 粒子透明度 -->
:particleOpacity="0.7"
<!-- 粒子数量 -->
:particlesNumber="60"
<!-- 粒子外观("circle","dege","triangle","polygon","star") -->
shapeType="circle"
<!-- 粒子大小 -->
:particleSize="6"
<!-- 线条颜色 -->
linesColor="#409efe"
<!-- 线条宽度 -->
:lineWidth="1"
<!-- 连接线是否可用 -->
:lineLinked="true"
<!-- 线条透明度 -->
:lineOpacity="0.4"
<!-- 线条距离 -->
:lineDistance="150"
<!-- 粒子运动速度 -->
:moveSpeed="3"
<!-- 是否有hover特效 -->
:hoverEffect="true"
<!-- 可用hover模式( "grab", "repulse", "bubble") -->
hoverMode="grab"
<!-- 是否有click特效 -->
:clickEffect="true"
<!-- 可用click模式 ("push", "remove", "repulse", "bubble")-->
clickMode="push"
</vue-particles>
</div>
</template>
<style scoped>
.login-jk{
background: #0B1746;
width: 100%;
height: calc(100%-100px);
position: absolute;
}
</style>
template
css
效果图
一:vue下载vue-particles
import install vue-particles --save-dev
二:main.js中引入
import VueParticles from 'vue-particles';
Vue.use(VueParticles)