Vue如何引入粒子特效

1、安装插件

npm install vue-particles --save-dev

2、在main.js全局引入

// 引入粒子特效
import VueParticles from 'vue-particles'Vue.use(VueParticles)

3、在想要使用粒子特效的页面引入

 <!--引入粒子特效--><vue-particlescolor="#fff":particle-opacity="0.7":particles-number="60"shape-type="circle":particle-size="4"lines-color="#fff":lines-width="1":line-linked="true":line-opacity="0.4":lines-distance="150":move-speed="2":hover-effect="true"hover-mode="grab":click-effect="true"click-mode="push"class="lizi"/>

属性说明：

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”

4、效果展示

Vue如何引入粒子特效相关推荐

用vue做粒子特效背景
1.你需要先引入vue-particles教脚手架 npm install vue-particles --save-dev 在main.js里面放入 import VueParticles from ...
VUE粒子特效vue-particles插件使用
vue-particles粒子特效第一步:下载包 vue-particles npm install --save vue-particles 第二步:在main.js中引入 vue-particl ...
Vue粒子特效（Vue-particles插件的使用）
我们经常看到这种效果的动图,有时候我们也想在页面显示出来,让我们一起来看看怎么在自己的页面中显示这种动态的粒子图片它主要运用了vue-particles插件. 使用教程安装插件 npm insta ...
vue 3 + mo.js 实现点赞粒子特效【实战】
ue 3.2 + js 实现点赞粒子特效创建一个项目一.显示页面 1.新建页面 2.写部分显示代码 3.导入文件 4.将其他的注释掉二.下载点赞图片 1.打开阿里云矢量库 2.复制SVG代码 3 ...
Unity的ScrollRect如何裁切粒子特效，以及如何使粒子特效显示在UI上
在功能开发中,有时候为了更好的效果会在UI上添加一些特效,比如在头像框上增加一个圆环的粒子特效,但由于粒子和UI的渲染方式有些不同,导致会出现UI和特效之间穿插,显示上不理想.并且如果在ScrollR ...
Android超强大的粒子动画库，流星雨，爆炸，满屏飞花，等粒子特效快速实现
因为公司项目,需要做粒子动画的特效,找了很多资料,偶然间在github上发现了一个比较强大的粒子特效动画leonids,分享给大家. Leonids是一个与标准Android UI配合使用的粒子系统库 ...
java游戏开发入门(十) -粒子特效
java游戏开发入门十 - 粒子特效 java游戏开发入门十 - 粒子特效前言编码创建一个粒子发射器,并将粒子发射器添加到实体对象效果图完整代码完整项目 java游戏开发入门十 - 粒子特 ...
SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效
SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效粒子特效简介使用粒子特效完整代码作者: NIck Cheng 粒子特效简介粒子特效通常使用与要表现某些动态 ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...

Vue如何引入粒子特效

Vue如何引入粒子特效

1、安装插件

2、在main.js全局引入

3、在想要使用粒子特效的页面引入

4、效果展示

Vue如何引入粒子特效相关推荐

最新文章

热门文章