先来看我做的效果



我这个是用的背景色加上这个粒子效果实现的demo

平时我们做项目的话会添加背景图片这些,可能更加好看

看我的实现步骤

cnpm install -g vue-cli
vue init webpack star-project
cnpm install vue-particles --save-dev

在main.js中引入

//main.js
import VueParticles from 'vue-particles'
Vue.use(VueParticles)



在App.vue中写入

    <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"
class="lizi"
>
</vue-particles>
<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<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"
class="lizi"
>
</vue-particles>
<!-- <router-view/> -->
</div>
</template> <script>
export default {
name: 'App'
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
background:blue; /* margin-top: 60px; */
}
</style>

运行项目,效果即可以出来

vue中使用动画vue-particles实现背景粒子酷炫效果的更多相关文章

  1. Vue 中的动画特效

    Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  2. Vue中的动画效果

    Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...

  3. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

  4. vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  5. IntelliJ IDEA 换背景免费酷炫的插件(转)

    一.插件的安装 打开setting文件选择Plugins选项 Ctrl + Alt + S File -> Setting 分别是安装JetBrains插件,第三方插件,本地已下载的插件包. 二 ...

  6. Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...

  7. vue中css动画原理

    显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...

  8. Vue学习笔记【18】——Vue中的动画(使用过渡类名)

    为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能: 使用过渡类名 步骤分析  需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏  1. 使用 transition 元素, ...

  9. Vue学习笔记【21】——Vue中的动画(v-for 的列表过渡)

    定义过渡样式:  <style>    .list-enter,    .list-leave-to {      opacity: 0;      transform: translat ...

随机推荐

  1. 机械手相机9点坐标标定-基于C#+EmguCV

    很多初学者,都对标定概念模糊不清,分不清坐标系之间的关系,搞不清相机标定和机械手相机标定有什么关系,想当初自己也是一个人摸索了很久,本文将尽量给大家解释. 我们通常所说的相机标定分为两种,一种是相机参 ...

  2. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  3. enumrate用法

    转自*https://www.runoob.com/python/python-func-enumerate.html*侵删 描述 enumerate() 函数用于将一个可遍历的数据对象(如列表.元组 ...

  4. 关于ctype.h头文件使用说明

    ctype.h里的函数概况: 1.字符测试函数 (1)函数原型均为 int isXXX( int ch) (2)参数为int,任何参数均被转换为整形 (3)只能处理[0,127]之间的值 2.字符映射 ...

  5. Codeforces 479【F】div3

    题目链接:http://codeforces.com/problemset/problem/977/F 题意:给你一串数字序列,让你求最长上升子序列,但是这个子序列呢,它的数字得逐渐连续挨着. 题解: ...

  6. 2018湘潭大学程序设计竞赛【D】

    题目链接:https://www.nowcoder.com/acm/contest/105/D 题意:就是数的fib表示方法.按权展开,又按二进制算出结果输出. 题解:贪心和数论吧.找到跟数最接近的f ...

  7. identityserver4 对接钉钉

    参考了https://www.cnblogs.com/sheldon-lou/p/10643267.html

  8. dl,dt,dd标签 VS 传统table实现数据列表

    过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难.现在,越来越多的前端开发er们开始使用xHTML+CSS替代最 ...

  9. 整理下webapi的一些琐碎事情

    在使用webapi的时候我们会遇到一些问题比如 1.POST怎么请求 2.怎么兼容JSONP请求 3.怎么给指定端提供跨域的请求 4.怎么显示单独的models层的注释 问题一二其他人都玩的比较成熟的 ...

  10. python库之lightgbm

    一.安装 https://blog.csdn.net/qq_40317897/article/details/81021958 参考文献: [1].LightGBM中文文档 https://light ...