vue动态粒子特效

<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)