vue中利用particlesJS实现鼠标动画粒子连线效果

最近做后台管理系统，发现一款散射的原子颗粒特效插件，效果不错，使用到了项目中。

一、安装：

npm i particles.js --S

二、演示：

https://zhangyongwnag.github.io/Framework_mamage/dist/#/Login

三、使用：

①：创建组件：ParticlesJS.vue

②：引入执行

③：配置参数

四、配置参数：

参数	说明
particles.number	粒子的数量、分布密度
particles.color	粒子的颜色
particles.shape	粒子的形状、可自定义图片
particles.opacity	粒子的透明度、渐变随机动画
particles.size	粒子的大小
particles.line_linked	连接线的狙击、颜色、不透明度
particles.move	原子的移动方向、边界、吸引动画
interactivity.detect_on	原子之间互动检测
interactivity.events	原子点击动画效果
interactivity.modes	原子互动、击退动画效果

五、链接：
particlesJS：https://github.com/VincentGarreau/particles.js
项目源码：https://github.com/zhangyongwnag/Framework_mamage

vue中利用particlesJS实现鼠标动画粒子连线效果相关推荐

html 全景图three,vue中利用three.js实现全景图的完整示例
粗暴一点,直接上代码: 第一步: 通过指令下载three.js npm install three -S 第二步: 在组件中引用 import * as THREE from 'three' 第三步: ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
Vue 中利用 template标签遍历多维数组
Vue 中利用 template标签遍历多维数组 1. 需求 2. 二维数组内容 3. 列表渲染指令 v-for 4. template 标签 5. 正确的做法作者:高玉涵时间:2022.7.20 ...
vue中给元素添加鼠标移入，鼠标移出的效果的事件
在vue 中鼠标移入方法为 v-on:mouseover,鼠标移出方法为 v-on:mouseout 使用方法如以下代码中的写法 <div class="subei1" id ...
vue 中利用canvas 给pdf文件加水印---详细教程（附上完整代码）
需求:在h5网页中打开pdf文件,要求给文件添加水印实现技术及插件:vue,vue-pdf,canvas 插件安装: npm i vue-pdf --save npm i pdf-lib --sav ...
解决vue中使用v-html解析后table表格的线不见了
vue中使用 v-html 解析富文本 1.在编辑器中输入什么就显示什么 2.使用v-html解析后有问题可以看看☞☞ 官网地址需要注意的是:从编辑器中获取的 html 代码是不包含任何样式的纯 ...
vue中利用gif.js实现GIF动图下载
前言 gif.js可以将帧图或者canvas拼成新的gif,gif.js没有npm install的库,引用方式如下: 1. 下载资源首先从官方仓库上下载代码,worker不能跨域,所以资源必然是放 ...
vue中使用scrollreveal制作滚动动画
现在很多产品展示的网页在滚动的时候会触发动画,如果用js去写的话需要监听scrolltop,会很繁琐,而scrollreveal.js可以完美地实现这样的效果,满足我们自定义css3动画以及支持ani ...

vue中利用particlesJS实现鼠标动画粒子连线效果

vue中利用particlesJS实现鼠标动画粒子连线效果相关推荐

最新文章

热门文章