vue项目中使用粒子动画效果

北极的邻居

2024-01-31 24 阅读1分钟

粒子动画.png

在 vue2.0 中添加登录页的粒子动画背景

登录页添加粒子动画背景，页面保留严谨性的同时增加趣味性，使用粒子动画也不会过多的干涉用户注意力，增加用户的视觉负担。

Vue-Particles 官网

vue-particles.netlify.app/

安装

 npm install vue-particles --save-dev
 
 安装之后查看是否出现在 devDependencies 中
  "devDependencies": {
    "vue-particles": "^1.0.9",
  },

Main.js 引用

import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)

页面使用

<template>
  <div id="app">
    <vue-particles
      style="width: 100vw; height: 100vh" 
      color="#2d3a4b" 
      :particleOpacity="0.7" 
      :particlesNumber="60" 
      shapeType="star"
      :particleSize="4"
      linesColor="#e09172"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>
  </div>
</template>

具体的配置字段可以参考开篇的官网内容