先来看我做的效果



我这个是用的背景色加上这个粒子效果实现的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. detours编译与windows下makefile学习

    1.编译 windows环境命令行编译很少用,detours需要使用命令行编译,刚好试试,过程如下: 1.为了能够在所有目录中使用nmake命令,需要设置环境变量Path D:\Program Fil ...

  2. Redis消息订阅与发布

    监听器的创建 package com.sogou.baike.testimport.testSubscribe; import redis.clients.jedis.JedisPubSub; pub ...

  3. Qt无边框窗口的移动、拉伸边框、鼠标滚轮缩放大小

    主要是处理窗口上鼠标的几个事件,具体代码请看下面的截图, 完整代码的下载链接在此:http://download.csdn.net/detail/beyond0824/9657110, 本示例代码中, ...

  4. HDU-1754-I Hate It-线段树-求区间最值和单点修改

    开学新拉的题目,老题重做,思路会稍微比之前清晰,不过这也算是一点点进步了. 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现 ...

  5. 29-Ubuntu-远程管理命令-03-SSH工作方式简介

    在Linux中SSH是非常重要的工具,通过SSH客户端可以连接到运行了SSH服务器的远程机器上. 1.SSH客户端是一种使用Secure Shell(SSH)协议连接到远程计算机的软件程序. 2.SS ...

  6. 最接近神的人_NOI导刊2010提高(02)

    题目描述 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某种活动的图案.而石门上方用古代文写着“神的殿堂”.小FF猜想里面应该就有王室的 ...

  7. 【csp】2017-9

    1.打酱油 题目: 题意:如上. 题解:经典问题.看代码吧.qwq 代码: #include<iostream> #include<cstdio> #include<al ...

  8. docker集群管理之swarm

    一.简介 docker集群管理工具有swarm.k8s.mesos等,我所用到的是swarm和k8s,这篇文章主要介绍swarm:swarm是docker集成的原生 管理工具,只要你安装上docker ...

  9. Flask-session用法

    概念 flask-session是flask框架的session组件,由于原来flask内置session使用签名cookie保存,该组件则将支持session保存到多个地方,如: * redis:保 ...

  10. Spring注解基础学习总结

    1.依赖注入注解: @Component:Bean注入到Spring容器组件(通用) @Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE):Bean作用域( ...