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>
相关推荐
二两锅巴10 分钟前
📺 无需Electron!前端实现多显示器浏览器窗口精准控制与通信
前端
炸土豆14 分钟前
防抖节流里的this传递
前端·javascript
用户40993225021214 分钟前
Vue3中动态样式数组的后项覆盖规则如何与计算属性结合实现复杂状态样式管理?
前端·ai编程·trae
山璞17 分钟前
Flutter3.32 中使用 webview4.13 与 vue3 项目的 h5 页面通信,以及如何调试
前端·flutter
努力早日退休20 分钟前
Antd Image标签父元素会比图片本身高几个像素的原因
前端
林希_Rachel_傻希希20 分钟前
手写Promise--教学版本
前端·javascript·面试
ETA823 分钟前
`console.log([1,2,3].map(parseInt))` 深入理解 JavaScript 中的高阶函数与类型机制
前端·javascript
呼叫694523 分钟前
图片列表滚动掉帧的原因分析与解决方案
前端
3秒一个大25 分钟前
现代前端开发框架的工程化实践:基于 Vite 与 Vue3
vue.js
狗哥哥27 分钟前
AI 驱动前端自动化测试:一套能落地、能协作、能持续的工程化方案
前端·测试