vue中使用动画vue-particles实现背景粒子酷炫效果
先来看我做的效果
我这个是用的背景色加上这个粒子效果实现的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实现背景粒子酷炫效果的更多相关文章
- Vue 中的动画特效
Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中的动画效果
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...
- Vue中Js动画 与Velocity.js 多组件多元素 列表过渡
Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...
- vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- IntelliJ IDEA 换背景免费酷炫的插件(转)
一.插件的安装 打开setting文件选择Plugins选项 Ctrl + Alt + S File -> Setting 分别是安装JetBrains插件,第三方插件,本地已下载的插件包. 二 ...
- Vue中过度动画效果应用
一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...
- vue中css动画原理
显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...
- Vue学习笔记【18】——Vue中的动画(使用过渡类名)
为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能: 使用过渡类名 步骤分析 需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 1. 使用 transition 元素, ...
- Vue学习笔记【21】——Vue中的动画(v-for 的列表过渡)
定义过渡样式: <style> .list-enter, .list-leave-to { opacity: 0; transform: translat ...
随机推荐
- detours编译与windows下makefile学习
1.编译 windows环境命令行编译很少用,detours需要使用命令行编译,刚好试试,过程如下: 1.为了能够在所有目录中使用nmake命令,需要设置环境变量Path D:\Program Fil ...
- Redis消息订阅与发布
监听器的创建 package com.sogou.baike.testimport.testSubscribe; import redis.clients.jedis.JedisPubSub; pub ...
- Qt无边框窗口的移动、拉伸边框、鼠标滚轮缩放大小
主要是处理窗口上鼠标的几个事件,具体代码请看下面的截图, 完整代码的下载链接在此:http://download.csdn.net/detail/beyond0824/9657110, 本示例代码中, ...
- HDU-1754-I Hate It-线段树-求区间最值和单点修改
开学新拉的题目,老题重做,思路会稍微比之前清晰,不过这也算是一点点进步了. 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现 ...
- 29-Ubuntu-远程管理命令-03-SSH工作方式简介
在Linux中SSH是非常重要的工具,通过SSH客户端可以连接到运行了SSH服务器的远程机器上. 1.SSH客户端是一种使用Secure Shell(SSH)协议连接到远程计算机的软件程序. 2.SS ...
- 最接近神的人_NOI导刊2010提高(02)
题目描述 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某种活动的图案.而石门上方用古代文写着“神的殿堂”.小FF猜想里面应该就有王室的 ...
- 【csp】2017-9
1.打酱油 题目: 题意:如上. 题解:经典问题.看代码吧.qwq 代码: #include<iostream> #include<cstdio> #include<al ...
- docker集群管理之swarm
一.简介 docker集群管理工具有swarm.k8s.mesos等,我所用到的是swarm和k8s,这篇文章主要介绍swarm:swarm是docker集成的原生 管理工具,只要你安装上docker ...
- Flask-session用法
概念 flask-session是flask框架的session组件,由于原来flask内置session使用签名cookie保存,该组件则将支持session保存到多个地方,如: * redis:保 ...
- Spring注解基础学习总结
1.依赖注入注解: @Component:Bean注入到Spring容器组件(通用) @Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE):Bean作用域( ...