vue 使用粒子动画

vue 使用粒子动画
npm 命令
　npm install vue-particles --save-dev
min.js 引入
import VueParticles from ‘vue-particles’
Vue.use(VueParticles)

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

属性：

color: String类型。默认’#dedede’。粒子颜色。
particleOpacity: Number类型。默认0.7。粒子透明度。
particlesNumber: Number类型。默认80。粒子数量。
shapeType: String类型。默认’circle’。可用的粒子外观类型有：“circle”,“edge”,“triangle”, - - “polygon”,“star”。
particleSize: Number类型。默认80。单个粒子大小。
l- inesColor: 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”。

vue 使用粒子动画相关推荐

Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
canvas学习之粒子动画
项目地址:http://pan.baidu.com/s/1ccTptc 粒子动画意思就是把一个图片粒子画,然后使用粒子作出动画效果,主要两个问题:一个图片如何粒子化,这里面我们使用canvas的get ...
canvas粒子动画
2019独角兽企业重金招聘Python工程师标准>>> 周末在家玩了一下canvas粒子动画,先看看效果,用的图是我们微众银行的干爹'qq',先看看效果 ##1.获取图片信息 ### ...
vuejs粒子动画特效 npm安装插件vue-particles（particles.js） - 代码篇
文章目录 1. npm 安装插件`vue-particles` 2. 效果图: 3. 代码截图: 4. 代码示下: 5. 附件 · 文章阅读: 1. npm 安装插件vue-particles npm ...
惊艳的HTML5粒子动画特效
转自:http://geek.csdn.net/news/detail/201487?ref=myread HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果, ...
带着canvas去流浪系列之九粒子动画
[摘要] canvas实现粒子动画示例代码托管在:http://www.github.com/dashnowords/blogs 一. 粒子特效粒子特效一般指密集点阵效果,它并不是canvas独有 ...
WPF特效-粒子动画
原文:WPF特效-粒子动画 WPF实现泡泡龙小游戏效果. /// -Ball to Ball Collision - Detection and Handling /// http://sta ...
Swift开发之粒子动画的实现
####粒子系统介绍什么是粒子系统? 粒子系统是由总体具有相同的表现规律,个体却随机表现出不同的特征的大量显示元素构成的集合. 粒子定义有三要素群体性:粒子系统是由"大量显示元素&quo ...

vue 使用粒子动画

vue 使用粒子动画相关推荐

最新文章

热门文章