图上那些类似于星座图的点和线
是由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)的更多相关文章

  1. js实现粒子特效,particles.js的使用

    今天偶然看到了一个比较炫酷的js网页.是粒子特效的,就试着用了用.一下是步骤,方便以后查看使用. 1.在网站下载源码https://github.com/VincentGarreau/particle ...

  2. 在网页中使用particlesjs实现背景的动态粒子特效

    先上一张效果图: 这种动态的背景特效,制作起来其实非常简单. 使用了particles.js particles.js可以从github网站下载到最新的源码,网址是 https://github.co ...

  3. 干货:Vue粒子特效(vue-particles插件)

    转:https://www.jianshu.com/p/53199b842d25 image.png 图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事 ...

  4. vue.js 实现粒子特效之插件( vue-particles )

    首先先一张效果图 图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动. 使用教程: npm install vue-particles --s ...

  5. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  6. vue动态class——实现tag的选中状态

    vue动态class——实现tag的选中状态 <template> <div class="common-nav"> <div class=" ...

  7. vue动态组件切换(选项卡)

    vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...

  8. Vue动态新增对象属性

    Vue.set( target, key, value ) 参数: {Object | Array} target {string | number} key {any} value 返回值:设置的值 ...

  9. Vue 动态组件渲染问题分析

    fire 读在最前面: 1.本文适用于有一定基础的vue开发者,需要了解基本的vue渲染流程 2.本文知识点涉及vue构造器以及选项策略合并.<component> 渲染逻辑 问题描述: ...

随机推荐

  1. go语言设计模式之adapter

    adapter.go package adapter import ( "fmt" ) type LegacyPrinter interface { Print(s string) ...

  2. 201871010131-张兴盼《面向对象程序设计(java)》第一周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://edu.cnblogs.com/campus/xbsf/ ...

  3. 【转】【好文章】更愉快的写css

    我在写CSS的时候经常会碰到些麻烦事儿: 1)看上去蛮简单的排版却写了很久 2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性 3)margin.padding.font-size等属性在不 ...

  4. UVA1401 Remember the word DP+Trie

    问题描述 洛谷(有翻译) 题解 DP,设\(opt_i\)代表前\(i\)个字符方案数. Trie优化,刷表法. \(\mathrm{Code}\) #include<bits/stdc++.h ...

  5. js正则高级函数(replace,matchAll用法),实现正则替换(实测很有效)

    有这么一个文档,这是在PC端显示的效果,如果放在移动端,会发现字体大小是非常大的,那么现在想让这个字体在移动端能按照某个比例缩小,后台返回的数据格式是: <html> <head&g ...

  6. 搞定Junit单元测试{非专业}

    1:测试分类 2:常用测试方法 2.1 断言语句 3: 基本测试 4: 组合测试 5:参数化测试 6:分类测试(Category) 1:测试分类  1. 黑盒测试:不需要写代码,给输入值,看程序是否能 ...

  7. PHP JWT token实现

      原文链接:https://www.jb51.net/article/146790.htm   机制:   代码如下:   <?php /**  * PHP实现jwt  */ class Jw ...

  8. 【HDU6037】Expectation Division(动态规划,搜索)

    [HDU6037]Expectation Division(动态规划,搜索) 题面 Vjudge 你有一个数\(n\),\(n\le 10^{24}\),为了方便会告诉你\(n\)分解之后有\(m\) ...

  9. 最全的.NET Core跨平台微服务学习资源

    一.Asp.net Core基础 微软中文官网:https://docs.microsoft.com/zh-cn/aspnet/core/getting-started/ 微软英文官网:https:/ ...

  10. 猪肉涨价飞快?让我们用python来预测一下今年最后一个月的猪肉价格吧!

    今天我们将使用Facebook的“先知”模型来预测2019年12月广东省的猪肉价格,本实验仅供参考. 1.准备数据 在猪价系统网站上利用开发者工具获得过去一年广东省的猪肉价格保存为json格式:htt ...