Vue动态粒子特效插件（背景线条吸附动画）

最新推荐文章于 2024-04-29 14:35:07 发布

luvJie-7c

最新推荐文章于 2024-04-29 14:35:07 发布

阅读量2k

点赞数 1

分类专栏： Vue 文章标签：前端 javascript vue java 后端

本文链接：https://blog.csdn.net/qq_45978154/article/details/129379505

版权

Vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue项目中安装和使用vue-particles库来添加粒子动画背景。首先，通过npm安装库，然后在main.js中引入并应用。接着展示了vue-particles组件的使用示例，包括设置颜色、透明度、粒子数量等属性。最后列出了主要的可配置属性及其作用。

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

效果图：

一、安装：

npm install vue-particles --save

二、引入 main.js 文件：

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

三、使用：

    <vue-particles
      class="login-background"
      color="#409EFF"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="6"
      linesColor="#409EFF"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push">
    </vue-particles>

.login-background {//可设置背景图 铺满屏
  background: linear-gradient(-180deg, #dceaf2 0%, #ffffff 100%);
  width: 100%;
  height: 100%;
  position: absolute;
}

四、属性说明：

属性	类型	说明
color	String	粒子颜色（默认：#dedede）
particleOpacity	Number	粒子透明度（默认：0.7）
particlesNumber	Number	粒子数量（默认：80）
shapeType	String	粒子外观类型（默认：circle，全部：circle，edge，triangle，polygon，star）
particleSize	Number	单个粒子大小（默认：80）
linesColor	String	线条颜色（默认：#dedede）
linesWidth	Number	线条宽度（默认：1）
lineLinked	Boolean	连接线是否可用（默认：true）
lineOpacity	Number	线条透明度（默认：0.4）
linesDistance	Number	线条距离（默认：150）
moveSpeed	Number	粒子运动速度（默认：3）
hoverEffect	Boolean	是否有hover特效（默认：true）
hoverMode	String	hover模式类型（grab，repulse，bubble）
clickEffect	Boolean	是否有click特效（默认：true）
clickMode	String	click模式类型（push，remove，repulse，bubble）