vue中使用particles.js实现登录页炫酷粒子动效

1、安装依赖

yarn add particles.js 或 npm install particles.js

2、src/components下新建particles文件夹，文件夹下新建index.vue和particles.json，代码如下

index.vue

<template>
    <div class="particles-js-box">
        <div id="particles-js"></div>
    </div>
</template>

<script>
    /* eslint-disable */
    import particlesJs from "particles.js";
    import particlesConfig from "./particles.json";
    export default {
        data() {
            return {};
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                particlesJS("particles-js", particlesConfig);
                document.body.style.overflow = "hidden";
            }
        }
  } ;
</script>

<style scoped>
    .particles-js-box{
        position:fixed;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
    }
    #particles-js{
        background-color:#2d3a4b;
        width: 100%;
        height: 100%;
    }
</style>

particles.json，动态样式配置参考官网： https://github.com/VincentGarreau/particles.js
参考： https://blog.csdn.net/zcy_wxy/article/details/89043288

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "star",
      "stroke": {
        "width": 2,
        "color": "#ffb61e"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.8,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 2,
        "opacity_min": 0.2,
        "sync": false
      }
    },
    "size": {
      "value": 4,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 30,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#edd1d8",
      "opacity": 0.9,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 8,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 100,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "Window",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

3、在login.vue页引入组件使用

<template>
  <div class="login">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">若依后台管理系统</h3>
      <particles></particles> <!--粒子特效背景组件-->
     
    </el-form>
    
  </div>
</template>

<script>
import Particles from '@/components/particles/index'

export default {
  name: "Login",
  components: {Particles},
</script>

上效果

参数说明

参数	说明
particles.number	粒子的数量分布密度
particles.color	粒子的颜色
particles.shape	粒子的形状，可自定义图片
particles.opacity	粒子的透明度，渐变随机动画
particles.size	粒子的大小
particles.line_linked	连接线的狙击，颜色，不透明度
particles.move	原子的移动方向，边界，吸引动画
particles.detect_on	原子之间互动检测
particles.events	原子点击动画效果
particles.modes	原子互动，击退动画效果