当前位置: 首页 > news >正文

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

目录

效果图:

一、安装:

二、引入 main.js 文件:

 三、使用:

 四、属性说明:


效果图:

 

 

 一、安装:

npm install vue-particles --save

二、引入 main.js 文件:

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

 三、使用:

    <vue-particlesclass="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;
}

 四、属性说明:

属性类型说明
colorString粒子颜色(默认:#dedede)
particleOpacityNumber粒子透明度(默认:0.7)
particlesNumberNumber粒子数量(默认:80)
shapeTypeString粒子外观类型(默认:circle,全部:circle,edge,triangle,polygon,star)
particleSizeNumber单个粒子大小(默认:80)
linesColorString线条颜色(默认:#dedede)
linesWidthNumber线条宽度(默认:1)
lineLinkedBoolean连接线是否可用(默认:true)
lineOpacityNumber线条透明度(默认:0.4)
linesDistanceNumber线条距离(默认:150)
moveSpeedNumber粒子运动速度(默认:3)
hoverEffectBoolean是否有hover特效(默认:true)
hoverModeStringhover模式类型(grab,repulse,bubble)
clickEffectBoolean是否有click特效(默认:true)
clickModeStringclick模式类型(push,remove,repulse,bubble)

 

http://www.lryc.cn/news/32627.html

相关文章:

  • 【Java 类】002-类、属性、方法、代码块
  • Ubuntu Linux 编译安装的基本步骤
  • day59反刍笔记
  • 【阅读笔记】你不知道的Javascript--强制类型转换4
  • 华为OD机试真题Python实现【有效子字符串】真题+解题思路+代码(20222023)
  • 上门按摩预约APP源码-东郊到家源码(开发,PHP,平台搭建)
  • STL讲解——模拟实现vector
  • 各种经典排序算法介绍及实现源码
  • 历史大讲堂:这是真·图形化 苹果系统历史回顾(上)
  • 今天女神节,用python画个贺卡送给母亲吧
  • 【编程基础之Python】11、Python中的表达式
  • 华为OD机试真题Python实现【乱序整数序列两数之和绝对值最小】真题+解题思路+代码(20222023)
  • 字符串转换整数 (atoi)(python)
  • 洛谷 P1115 最大子段和
  • 【Linux】-- 权限和Shell运行原理
  • C++各类设计模式及实现详解
  • 【Linux】进程理解与学习(Ⅰ)
  • 认识代码之前,请先认识你自己 |《编程人生》
  • react学习笔记-5:react路由
  • [Python图像处理] 使用高通滤波器实现同态滤波
  • PyTorch深度学习:60分钟入门
  • C语言指针常见问题汇总
  • Coremail邮件系统全新上线存档邮箱功能
  • Python绘图
  • 【独家】华为OD机试 - 第K个最小码值的字母(C 语言解题)
  • 整数反转(python)
  • 【数据结构】二叉树与堆
  • Git图解-常用命令操作-可视化
  • C语言-基础了解-20-typedef
  • Ubuntu系统升级16.04升级18.04