animate.css总结
本文对animate.css的各个效果进行总结
bounce
从上掉落,在地上小幅度跳起
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
text-align: center;line-height: 100px;
color: blue;
font: 50px "微软雅黑";
}
</style>
</head>
<body>
<div id="mode" class="animated infinite bounce ">
animation
</div>
</body>
</html>
flash
闪烁两下,适合用于图片
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite flash "> </div>
</body>
</html>
pulse
小幅度放大后再缩小为原型
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite pulse "> </div>
</body>
</html>
rubberBand
大幅度左右弹性拉伸
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite rubberBand "> </div>
</body>
</html>
shake
小幅度左右摇晃
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite shake "> </div>
</body>
</html>
swing
钟摆式左右摇晃
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite swing "> </div>
</body>
</html>
tada
小幅度旋转摇摆
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite tada "> </div>
</body>
</html>
wobble
左右大幅度反向钟摆摇晃
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite wobble "> </div>
</body>
</html>
jello
弹性小幅度斜向摇晃
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite jello "> </div>
</body>
</html>
bounceIn
弹性放大出现
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite bounceIn"> </div>
</body>
</html>
bounceInDown/bounceInUp
向下/上出现,小幅度弹跳效果
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite bounceInDown"> </div>
</body>
</html>
bounceInLeft/bounceInRight
向右/左出现,小幅度弹跳效果
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite bounceInLeft"> </div>
</body>
</html>
bounceOut
小幅放大后缩小消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite bounceOut"> </div>
</body>
</html>
bounceOutDown/bounceOutLeft/bounceOutRight/bounceOutUp
快速向下消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite bounceOutDown"> </div>
</body>
</html>
fadeIn
由透明到出现
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite fadeIn"> </div>
</body>
</html>
fadeInDown/fadeInLeft/fadeInRight/fadeInUp
由透明缓慢向下/左/右/上出现
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite fadeInDown"> </div>
</body>
</html>
fadeInDownBig/fadeInLeftBig/fadeInRightBig/fadeInUpBig
快速由透明向下/左/右/下出现
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite fadeInDownBig"> </div>
</body>
</html>
fadeOut
缓慢透明消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite fadeOut"> </div>
</body>
</html>
fadeOutDown/fadeOutLeft/fadeOutRight/fadeOutUp
向下/左/右/上缓慢透明消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite fadeOutDown"> </div>
</body>
</html>
fadeOutDownBig/fadeOutLeftBig/fadeOutRightBig/fadeOutUpBig
快速向下/左/右/上缓慢透明消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite fadeOutDown"> </div>
</body>
</html>
filp
3D向右旋转一圈
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite flip"> </div>
</body>
</html>
flipInX/flipInY
上下/左右小幅度3D摇摆出现
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite flipInX"> </div>
</body>
</html>
flipOutX/flipOutY
上下/左右小幅度3D摇摆消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite flipOutX"> </div>
</body>
</html>
lightSpeedIn/lightSpeedOut
向左刹车式出现/向右刹车式消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite lightSpeedIn"> </div>
</body>
</html>
rotateIn/ratateOut
2D顺时针旋转出现/消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite rotateIn"> </div>
</body>
</html>
rotateInDownLeft/rotateOutDownLeft
以左下角为中心顺时针旋转出现/消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite rotateInDownLeft"> </div>
</body>
</html>
rotateInDownRight/rotateOutDownRight
以右下角为中心逆时针旋转出现/消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite rotateInDownRight"> </div>
</body>
</html>
rotateInUpLeft/rotateOutUpLeft
以左下角为中心逆时针旋转出现/消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite rotateInUpLeft"> </div>
</body>
</html>
rotateInUpRight/rotateOutUpRight
以右下角为中心顺时针旋转出现/消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite rotateInUpRight"> </div>
</body>
</html>
slideInUp/slideInDown/slideInLeft/slideInRight
向上/下左/右滑动出现
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite slideInUp"> </div>
</body>
</html>
slideOutUp/slideOutDown/slideOutLeft/slideOutRight
向上/下/左/右滑动消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite slideOutUp"> </div>
</body>
</html>
zoomIn/zoomOut
放大出现/缩小消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite zoomIn"> </div>
</body>
</html>
zoomInDown/zoomInLeft/zoomInRight/zoomInUp
向下/左/右/上放大出现
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite zoomInDown"> </div>
</body>
</html>
zoomOutDown/zoomOutLeft/zoomOutRight/zoomOutUp
向下/左/右/上缩小消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite zoomOutDown"> </div>
</body>
</html>
hinge
顺时针旋转后小幅度钟摆
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite hinge "> </div>
</body>
</html>
rollIn/rollOut
顺时针2D旋转进入出现/消失
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>mode</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
#mode{
margin: 0 auto;
width: 300px;height: 100px;
background: url(bg.jpg);
}
</style>
</head>
<body>
<div id="mode" class="animated infinite rollIn "> </div>
</body>
</html>
animate.css总结的更多相关文章
- animate.css(第三方动画使用方法)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 使用CSS3动画库animate.css
IE9及更早版本的IE浏览器都不支持css3动画 谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些都支持css3动画 animate.css内置了很多典型的css3动画 用法 1 ...
- 动画库Animate.css
笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- animate.css配合wow.min.js实现各种页面滚动效果
有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...
- animate.css
这是个css3动画框架,现在很流行,在小动画效果有很多,使用的方式 <div class="animated bounce"></div> /*只要修改bo ...
- css 动画类库Animate.css
地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...
- 图片翻页效果引出的animate.css,很好玩,多动动吧~
有一个项目,客户需要页面翻转的效果,需要应用在合作伙伴里面的图片上,一共有43张图片,我把它做成了随机定时的转动,鼠标经过时转动: animate.css科普文章:http://www.dowebok ...
随机推荐
- 【转】本地存储-localStroage/sessionStorage存储
原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...
- Mayor's posters(线段树+离散化POJ2528)
Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 51175 Accepted: 14820 Des ...
- python(二)数据类型
一.整数 创建方法 i = 10 i = int(10) i = int("10",base=2) #“”中是几进制的表示,base是选择要表示的进制,如base=2,用2进制的 ...
- [问题2014S02] 解答
[问题2014S02] 解答 首先注意到: 两个实系数多项式 \(f(x),g(x)\) 互素当且仅当 \(f(x),g(x)\) 在复数域 \(\mathbb{C}\) 上没有共公根, 当且仅当结 ...
- 通过Mac远程调试iPhone/iPad上的网页(转)
我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非 ...
- 十六、Swing高级组件
1.利用JTable类直接创建表格 (1)创建表格 构造方法:JTable(Object rowData,Object[] columnNames) (2)定制表格 编辑:isCellEditable ...
- 制作登录界面,登录成功后把用户名放在session里,在第3个页面读取session显示用户名
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Chrome浏览器快捷键大全(新加了其他一些浏览器的独有)
官方快捷键文档: https://support.google.com/chrome/answer/157179?hl=zh-Hans&ref_topic=14676 浏览器标签页和窗口快 ...
- Python之SQLAlchemy学习
alchemy 英[ˈælkəmi] 美[ˈælkəmi] n. 炼金术; 炼丹术; (改变事物.物质的)魔力(或方法) ; (事物.物质的) 神秘变化; SQLAlchemy是Python中最有名的 ...
- CSS 3 阴影,倒影,渐变
盒子阴影 box-shadow:盒子的阴影 第一个参数:设置的是阴影的水平偏移量 第二个参数:设置的是阴影的垂直偏移量 第三个参数:设置阴影的模糊程度 第四个参数:设置阴影外延值 第五个参数:阴影的颜 ...