Vue 动态粒子特效(vue-particles)
图上那些类似于星座图的点和线
是由vue-particles
生成的,不仅自己动,而且能与用户鼠标事件产生互动。
是非常炫的一种动态特效
可以在Vue项目中使用,需要安装第三方依赖
使用步骤
1. 安装
npm install vue-particles --save-dev
复制代码
或者
npm i vue-particles
复制代码
2. 引用
在main.js
中引用
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
复制代码
3. 使用
可以直接在vue文件中使用如下标签
<template>
<div id="app">
<vue-particles
color="#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>
</div>
</template>
复制代码
然后就会显示效果了
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"。
如果想做背景图片的话,可以给这个标签加一个class
,直接添加背景图
5. 小问题
通常使用我们都是直接引入这个标签,
然后在这个标签后面放上自己的内容
但是,这样的话,是无法将粒子特效设置为背景的,而是将你自己写的内容推了下去
上面是粒子特效,下面是你的内容,所以是无法设置为背景的
这时候我们可以把这个粒子特效标签设置定位 position:absolute
但是有时候它会遮挡住我们的一些元素,所以可以把绝对定位换成position:fixed
,可能会解决问题
总之在使用的时候,通常情况下要使用定位来使这个特效作为我们的背景特效
.
Vue 动态粒子特效(vue-particles)的更多相关文章
- js实现粒子特效,particles.js的使用
今天偶然看到了一个比较炫酷的js网页.是粒子特效的,就试着用了用.一下是步骤,方便以后查看使用. 1.在网站下载源码https://github.com/VincentGarreau/particle ...
- 在网页中使用particlesjs实现背景的动态粒子特效
先上一张效果图: 这种动态的背景特效,制作起来其实非常简单. 使用了particles.js particles.js可以从github网站下载到最新的源码,网址是 https://github.co ...
- 干货:Vue粒子特效(vue-particles插件)
转:https://www.jianshu.com/p/53199b842d25 image.png 图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事 ...
- vue.js 实现粒子特效之插件( vue-particles )
首先先一张效果图 图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动. 使用教程: npm install vue-particles --s ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- vue动态class——实现tag的选中状态
vue动态class——实现tag的选中状态 <template> <div class="common-nav"> <div class=" ...
- vue动态组件切换(选项卡)
vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...
- Vue动态新增对象属性
Vue.set( target, key, value ) 参数: {Object | Array} target {string | number} key {any} value 返回值:设置的值 ...
- Vue 动态组件渲染问题分析
fire 读在最前面: 1.本文适用于有一定基础的vue开发者,需要了解基本的vue渲染流程 2.本文知识点涉及vue构造器以及选项策略合并.<component> 渲染逻辑 问题描述: ...
随机推荐
- Rman Enhancements(增强) In Oracle 11g. (Doc ID 1115423.1)
Rman Enhancements In Oracle 11g. (Doc ID 1115423.1) APPLIES TO: Oracle Database - Enterprise Edition ...
- tensorflow dataloader 相关内容
Tensorflow dataloader 相关调研:数据读取是训练的开始,是非常关键的一步:下面是调研时搜集到的一些相关链接: 十图详解tensorflow数据读取机制 https://zhuanl ...
- LeetCode解题笔记 - 2. Add Two Numbers
2. Add Two Numbers You are given two non-empty linked lists representing two non-negative integers. ...
- Educational Codeforces Round 76 (Rated for Div. 2) B. Magic Stick 水题
B. Magic Stick Recently Petya walked in the forest and found a magic stick. Since Petya really likes ...
- Mixin Messenger 源码解读 1 — — WCDB Swift
Mixin Messenger 早期采用 FMDB 后来切换至 WCDB 沿用至今,一直比较可靠稳定,这里分享一下使用心得和功能扩展. 关于 Mixin Messenger Mixin Messeng ...
- 【STM32H7教程】第27章 STM32H7的TCM,SRAM等五块内存的动态内存分配实现
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第27章 STM32H7的TCM,SRAM等五块内 ...
- 【OCR系列之一】字符识别技术总览
最近入坑研究OCR,看了比较多关于OCR的资料,对OCR的前世今生也有了一个比较清晰的了解.所以想写一篇关于OCR技术的综述,对OCR相关的知识点都好好总结一遍,以加深个人理解. 什么是OCR? OC ...
- 大话设计模式Python实现-解释器模式
解释器模式(Interpreter Pattern):给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 下面是一个解释器模式的demo: #!/usr/ ...
- Linux 安装指定版本Git
git二进制文件下载地址: https://mirrors.edge.kernel.org/pub/software/scm/git/ 1.下载v2.21.0版本 wget https://mirro ...
- DOS命令行操作MySQL常用命令
平时用可视化界面用惯了,如果紧急排查问题,没有安装可视化工具的话,只能通过命令来看了. 以备不时之需,我们要熟悉一下命令行操作MySQL. 打开DOS命令窗口:WIN + R 输入cmd,回车 然后输 ...