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> 渲染逻辑 问题描述: ...
随机推荐
- python进程池和进程锁
1.进程锁:from multiprocessing import Process, Lock def f(l, i): l.acquire() print('hello world', i) l.r ...
- mysql中用命令行复制表结构(数据)
mysql中用命令行复制表结构的方法主要有一下几种: 1.只复制表结构到新表 CREATE TABLE 新表 SELECT * FROM 旧表 WHERE 1=2; 或 CREATE TABLE 新表 ...
- 求n的阶乘!
编写一个computer类,类中含有一个求n的阶乘的方法,将该类打包, 在另一个包中引入包,在主类中定义computer类的对象,调用求n的阶乘的方法,并输出结果 结果
- Mybatis框架增删改查
一.recourses中核心配置文件mybatis-config.xml 二. recourse中jdbc.properties 三.entity实体类 四.ISmbmsUserDao层 五.ISmb ...
- CSS-页面超出手机屏幕
手机页面左滑,页面超出手机屏幕. 解决方法: html,body{ overflow-x: hidden; } 从而解决问题,锁住横向滑动的屏幕.
- IT兄弟连 HTML5教程 HTML和CSS的关系
HTML是描述网页的标记语言,是将内容放到网页上,虽然HTML本身也自带一些样式功能,通过自身的属性,来实现一些特定的效果,制作出来的只能是一个网页,而不是一个美观的网页.最主要的是在HTML里面,一 ...
- IT兄弟连 Java语法教程 数组 深入数组 内存中的数组
数组是一种引用数据类型,数组引用变量只是一个引用,数组元素和数组变量在内存里是分开存放的.下面将深入介绍数组在内存中的运行机制. 内存中的数组 数组引用变量只是一个引用,这个引用变量可以指向任何有效的 ...
- allure定制化输出测试报告,让报告锦上添花!
一.定制化后的效果展示 用两张图展示效果: 二.注意别踩坑 allure定制化想必大部分情况都会去选择pip install pytest-allure-adaptor这个插件,安装完成后,运行定制化 ...
- linux检测远程端口是否打开
常用telnet ip port 方式(如telnet 172.17.193.18 5902)测试远程主机端口是否打开,或者用于测试当前环境与远程主机的端口之间的防火墙开通与否. telnet [ro ...
- 定位表和索引使用的Page
数据存储的基本单元是Page,每个Page是8KB,数据文件(mdf和ndf)占用的硬盘空间,逻辑上按照PageNumber进行划分,也就是说,可以把数据文件看作是PageNumber 从0到n的连续 ...