vue实现炫酷粒子效果

最新推荐文章于 2024-08-08 15:10:37 发布

fengshaopu

最新推荐文章于 2024-08-08 15:10:37 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/fengshaopu/article/details/120946603

版权

本文介绍了如何在Vue.js项目中实现炫酷的粒子效果。首先通过命令行安装vue-particles插件，然后在main.js文件全局引入。接着在需要应用粒子背景的组件（如首页或登录页面）中使用该插件，并详细说明了各项配置参数，包括粒子颜色、数量、形状、大小、线条颜色、运动速度等，以及如何开启hover和click特效。

摘要由CSDN通过智能技术生成

1.使用方法

用命令行下载插件vue-particles

npm install vue-particles --save-dev

2、在main.js文件中全局引入

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

3、在需要使用粒子背景的组件中使用(一般是首-页或者登陆背景中使用)

<template>
    <div id="login">
      <vue-particles
        class="login-bg"
      color="#39AFFD"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      linesColor="#8DD1FE"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      >