vue 实现粒子特效(vue-particles)

vue 实现粒子特效(vue-particles)

shell 复制代码
npm install vue-particles --save
  • main.js引入
js 复制代码
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
  • 登录页面使用 login.vue
html 复制代码
<template>
  <div class="box">
    <vue-particles
        color="#409EFF"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#409EFF"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >   </vue-particles>
  </div>
</template>
相关推荐
在澳门喝茶的芦竹1 分钟前
React高阶组件——React.momo
javascript·react.js
前端小巷子2 分钟前
深入解析 iframe
前端
WEI_Gaot2 分钟前
ES6 模板字符串
前端·javascript
前端大白话2 分钟前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架
前端大白话2 分钟前
前端必看!figure标签在响应式图片排版中的王炸操作,grid/flex布局实战指南
前端·设计模式·html
长欢2 分钟前
保持元素宽高比
javascript
前端大白话4 分钟前
深入理解 JavaScript 中 async 函数与 await 关键字的执行奥秘
前端·javascript·架构
HuaHua的世界5 分钟前
说说Vue 模板是如何编译的?
vue.js·面试
袋鱼不重6 分钟前
Vue3中 watch 和 watchEffect 的区别
前端
Jet_closer_burning6 分钟前
axios封装
前端·javascript·vue.js·react.js·ajax