效果图：

一、安装：

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;
}

四、属性说明：

属性	类型	说明
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）

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

vue 动态粒子背景插件
动态粒子背景效果如下: vue-particles 是粒子背景插件如何使用? 安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入: i ...
2021-11-10 动态粒子背景插件
动态粒子背景插件安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入 import VueParticles from 'vue-par ...
unity3d 气泡效果_Unity粒子特效插件打造冰与水物语
原标题:Unity粒子特效插件打造冰与水物语粒子系统用于在三维空间渲染一些二维图像,在游戏中模拟一些逼真的烟雾.火焰.雨.雪.冰.沙尘及爆炸等效果,而一般来说,水特效是其中最具挑战性的.今天我们就为 ...
Unity的一些特效和粒子特效插件
Unity的插件 Kitchen Cooking FX 厨房烹饪效果和声音 Ultimate VFX 终极粒子特效资源包 Advanced Dissolve高级溶解插件 Translucent Ima ...
用vue做粒子特效背景
1.你需要先引入vue-particles教脚手架 npm install vue-particles --save-dev 在main.js里面放入 import VueParticles from ...
vue粒子特效插件——vue-particles
效果: 参考官网:https://vue-particles.netlify.app/ 1. 安装vue-particles插件 npm install vue-particles --save-de ...
Vue 创建粒子效果插件
安装插件 npm install vue-particles --save-dev 在main.js中全局导入 import Vue from 'vue' import VueParticles fr ...
前端使用particlesjs实现背景的动态粒子特效
废话不多说,先上效果图: 这种动态的背景特效看似十分复杂,但制作起来其实非常简单. 我们这里借助了一个特效库叫做particles.js particles.js库的话我们可以从github网站下载到 ...
vue动态粒子背景效果-particles、threejs
一.第一种使用script标签引入,比较简单方便,但是效果比较单一,而且是在body上的背景,而vue又是单页面应用,所以说一个页面引入后其他页面也会有这个效果 mounted() {const o ...

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

效果图：

一、安装：

二、引入 main.js 文件：

三、使用：

四、属性说明：

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

最新文章

热门文章