今天有个一前辈来看了一下我的小程序啊,说写的还行就是可以不用只按照ui给的图写界面,自己可以添加一些动态的炫酷效果,不用不知道一用吓一跳啊,用之前觉得好好一个界面为什么要搞那些花里胡哨的东西,单纯一点不好吗,用了之后就是典型真香了

他说我可以多看看这些动画效果可以增强自己的css功底,想来也是多学点总比无所事事好,他推荐了我一个前端动画库animate.css,使用起来超级简单

第一步下载:

npm install animate.css --save

第二步引入:

import 'animate.css'

第三步使用clas就可以啦:

<img :src="textImage" class="questionare-text animated zoomIn">

这个animated是必须的,然后后买你跟着的就是你要的效果的class名,这个前端库里面有很多的效果,可以自行选择想要的效果。

加了动态效果的界面在手机上看起来简直好看,不过还是别太花里胡哨了,好看就好hhh

本来准备收尾了,突然发现这个竟然还有延时的效果,直接在你的效果后面加 delay-2s 就可以了(延时几秒自己看着办)

还有动画速度可以选择 slow, slower, fast, faster 等等 ,用起来美滋滋哦

至于动画api(找一手记录以后自己要用的时候用)

fade: {
title: '淡入淡出',
fadeIn: '淡入',
fadeInDown: '向下淡入',
fadeInDownBig: '向下快速淡入',
fadeInLeft: '向右淡入',
fadeInLeftBig: '向右快速淡入',
fadeInRight: '向左淡入',
fadeInRightBig: '向左快速淡入',
fadeInUp: '向上淡入',
fadeInUpBig: '向上快速淡入',
fadeOut: '淡出',
fadeOutDown: '向下淡出',
fadeOutDownBig: '向下快速淡出',
fadeOutLeft: '向左淡出',
fadeOutLeftBig: '向左快速淡出',
adeOutRight: '向右淡出',
fadeOutRightBig: '向右快速淡出',
fadeOutUp: '向上淡出',
fadeOutUpBig: '向上快速淡出'
},
bounce: {
title: '弹跳类',
bounceIn: '弹跳进入',
bounceInDown: '向下弹跳进入',
bounceInLeft: '向右弹跳进入',
bounceInRight: '向左弹跳进入',
bounceInUp: '向上弹跳进入',
bounceOut: '弹跳退出',
bounceOutDown: '向下弹跳退出',
bounceOutLeft: '向左弹跳退出',
bounceOutRight: '向右弹跳退出',
bounceOutUp: '向上弹跳退出'
},
zoom: {
title: '缩放类',
zoomIn: '放大进入',
zoomInDown: '向下放大进入',
zoomInLeft: '向右放大进入',
zoomInRight: '向左放大进入',
zoomInUp: '向上放大进入',
zoomOut: '缩小退出',
zoomOutDown: '向下缩小退出',
zoomOutLeft: '向左缩小退出',
zoomOutRight: '向右缩小退出',
zoomOutUp: '向上缩小退出'
},
rotate: {
title: '旋转类',
rotateIn: '顺时针旋转进入',
rotateInDownLeft: '从左往下旋入',
rotateInDownRight: '从右往下旋入',
rotateInUpLeft: '从左往上旋入',
rotateInUpRight: '从右往上旋入',
rotateOut: '顺时针旋转退出',
rotateOutDownLeft: '向左下旋出',
rotateOutDownRight: '向右下旋出',
rotateOutUpLeft: '向左上旋出',
rotateOutUpRight: '向右上旋出'
},
flip: {
title: '翻转类',
flipInX: '水平翻转进入',
flipInY: '垂直翻转进入',
flipOutX: '水平翻转退出',
flipOutY: '垂直翻转退出'
},
strong: {
title: '强调类',
bounce: '弹跳',
flash: '闪烁',
pulse: '脉冲',
rubberBand: '橡皮筋',
shake: '左右弱晃动',
swing: '上下摆动',
tada: '缩放摆动',
wobble: '左右强晃动',
jello: '拉伸抖动'
}

使用animate.css的更多相关文章

  1. animate.css(第三方动画使用方法)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...

  2. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  3. 使用CSS3动画库animate.css

    IE9及更早版本的IE浏览器都不支持css3动画 谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些都支持css3动画 animate.css内置了很多典型的css3动画   用法   1 ...

  4. 动画库Animate.css

    笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...

  5. animate.css总结

    本文对animate.css的各个效果进行总结 bounce 从上掉落,在地上小幅度跳起 <!DOCTYPE html> <meta charset="utf-8" ...

  6. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  7. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

  8. animate.css

    这是个css3动画框架,现在很流行,在小动画效果有很多,使用的方式 <div class="animated bounce"></div> /*只要修改bo ...

  9. css 动画类库Animate.css

    地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...

  10. 图片翻页效果引出的animate.css,很好玩,多动动吧~

    有一个项目,客户需要页面翻转的效果,需要应用在合作伙伴里面的图片上,一共有43张图片,我把它做成了随机定时的转动,鼠标经过时转动: animate.css科普文章:http://www.dowebok ...

随机推荐

  1. 月光宝盒之时间魔法--java时间的前生今世

    月光宝盒花絮 “曾经有一份真诚的爱情摆在我的面前,但是我没有珍惜,等到了失去的时候才后悔莫及,尘世间最痛苦的事莫过于此.如果可以给我一个机会再来一次的话,我会跟那个女孩子说我爱她,如果非要把这份爱加上 ...

  2. BCD 码、Gray 码、ASCII 码都是什么呢?

    BCD 码:即(Binary Coded Decimal)码,也称为 8421 码,是十进制代码中最常见的一种.每一位的 1 代表的十进制数称为这一位的权.BCD 码中每一位的权都是固定不变的,它属于 ...

  3. Java中自定义注解类,并加以运用

    在Java框架中,经常会使用注解,而且还可以省很多事,来了解下自定义注解. 注解是一种能被添加到java代码中的元数据,类.方法.变量.参数和包都可以用注解来修饰.注解对于它所修饰的代码并没有直接的影 ...

  4. SPN扫描

    0x01介绍 Kerberos是一种支持票证身份验证的安全协议.如果客户端计算机身份验证请求包含有效的用户凭据和服务主体名称 (SPN),则 Kerberos 身份验证服务器将授予一个票证以响应该请求 ...

  5. Wordpress设置Pretty Permalink的方法

    设置Wordpress的Pretty Permalink的关键点莫过于下面几点(本文是基于Apache httpd服务器). 1.Apache httpd要有rewrite module 在httpd ...

  6. Dubbo源码解析(一)服务发现

    一.Dubbo源码模块 官网地址 源码地址 1.1 源码模块组织 Dubbo工程是一个Maven多Module的项目,以包结构来组织各个模块. 核心模块及其关系,如图所示: 1.2 模块说明 dubb ...

  7. 基于Docker搭建大数据集群(五)Mlsql部署

    主要内容 mlsql部署 前提 zookeeper正常使用 spark正常使用 hadoop正常使用 安装包 微云下载 | tar包目录下 mlsql-cluster-2.4_2.11-1.4.0.t ...

  8. Spring 梳理 - AOP那些学术概念—通知、增强处理连接点(JoinPoint)切面(Aspect)

    Spring  AOP那些学术概念—通知.增强处理连接点(JoinPoint)切面(Aspect)   1.我所知道的AOP 初看起来,上来就是一大堆的术语,而且还有个拉风的名字,面向切面编程,都说是 ...

  9. .net core 3.0 Signalr - 05 使用jwt将用户跟signalr关联

    Signalr是以Group.Connect为核心来进行推送,比如,给某个组.某个连接来推送,但实际场景中,核心应该是某个组.某个人:然而一个人可以对应多个连接(浏览器多个tab页):本节就来介绍下自 ...

  10. wdcp 开启某个Mysql数据库远程访问

    wdcp 开启某个Mysql数据库远程访问 登录wdcp后台-Mysql管理-phpmyadmin 输入Mysql的root密码登录进入 示例代码: update mysql.user set hos ...