vue中使用动画vue-particles

1.下载依赖

npm install vue-particles --save-dev

2.main.js引入

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

3.直接使用

<vue-particlescolor="#dedede":particleOpacity="0.7":particlesNumber="80"shapeType="circle":particleSize="4"linesColor="#dedede":linesWidth="1":lineLinked="true":lineOpacity="0.4":linesDistance="150":moveSpeed="3":hoverEffect="true"hoverMode="grab":clickEffect="true"clickMode="push"></vue-particles>

4.属性含义

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: 布尔类型。默认true。连接线是否可用。
lineOpacity: Number类型。默认0.4。线条透明度。
linesDistance: Number类型。默认150。线条距离。
moveSpeed: Number类型。默认3。粒子运动速度。
hoverEffect: 布尔类型。默认true。是否有hover特效。
hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
clickEffect: 布尔类型。默认true。是否有click特效。
clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"

5.如果要换背景可以直接给#particles-js这个id添加背景图片和颜色即可，这个id是默认的

6.效果图

转载于:https://www.cnblogs.com/ldlx-mars/p/8012142.html

vue中使用动画vue-particles相关推荐

vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...
【Vue实用功能】Vue中实现粒子效果 particles.js
Vue中实现粒子效果为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果下载particles.j ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
vue中使用动画vue-particles实现背景粒子酷炫效果
参考官网:https://vue-particles.netlify.com/ 安装插件 npm install vue-particles --save-dev 在main.js中引入 import ...
vue中warning_使用vue的i18n 出现很多warning提示
问题描述使用vue的i18n 出现很多warning提示 Module parse failed: Unexpected token (1:10) You may need an appropria ...
vue中实现动画效果--三种方式
一.普通动画实现效果用一个按钮, 控制一个 div 的淡入和淡出步骤使用 js 控制 div 的 class name 点击 function anime() {var boxDom = do ...
vue中的动画效果与过渡效果
目录一.动画效果 1.过程: 2.注意: 二.过渡效果三.多个元素过度四.第三方css库动画与过渡效果添加的六个属性: 1.v-enter-active:进入的整个过程都能响应的样式 2.v- ...
vue中transition动画（移动端页面切换左右滑动效果）
例子一:(简单进入和离开动画) demo1 <template><div><button @click="isShow = !isShow">显 ...

vue中使用动画vue-particles

vue中使用动画vue-particles相关推荐

最新文章

热门文章