超棒的跨浏览器纯CSS动画实现 Animate.css使用方法
2012-10-03 15:53
791 查看
通常情况下如果需要生成web动画效果的话,我们肯定会考虑使用一些类库或者jQuery的animate方法,那么有什么方便的方法来快速实现动画效果呢?
在今天的这篇文章中,我们将介绍一个超棒的CSS动画实现方式 - Animate.css。这套CSS动画是由来自Manchester, UK的设计师Dan Eden开发和设计的。使用它能够很方便的给你的页面元素添加动画效果
Animate.css在线演示 http://demo.jb51.net/js/2012/Animatecss/
Animate.css下载地址 http://www.jb51.net/jiaoben/62726.html
如何使用?
使用非常简单,首先下载需要的css文件,你可以在下载地址上选择下载全部css,或者使用在线的Create custom build来生成自定义的css。
下载后将animate.css样式表引入你调用的HTML文件即可,如下:
当你引用以上CSS后,你可以在页面中添加相关class即可,如下:
添加class “animated tada“到id=”demo“的元素。注意:这里tada是动画类型,你可以选择多达将近60种不同的css动画特效。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030172/649881bd73cccefaffe5e4be6500a5a6.jpg)
以上是静态页面中的使用,如果你需要动态的调用,你可以使用类似jQuery的类库来使用addClass()方法调用动画。
这里我们使用jQuery和animate.css开发一个简单的小游戏,你需要在指定的时间内将汽车挪出铁箱。代码如下:
Javascript
我们使用addClass来操作动画,使用setTimeout来控制特定时间内的动作,代码如下:
HTML代码
html代码很简单:
CSS代码
定义了汽车和箱柜的样式:
希望大家喜欢这个小游戏,如果你有任何问题和建议,请给我们留言!
在今天的这篇文章中,我们将介绍一个超棒的CSS动画实现方式 - Animate.css。这套CSS动画是由来自Manchester, UK的设计师Dan Eden开发和设计的。使用它能够很方便的给你的页面元素添加动画效果
Animate.css在线演示 http://demo.jb51.net/js/2012/Animatecss/
Animate.css下载地址 http://www.jb51.net/jiaoben/62726.html
如何使用?
使用非常简单,首先下载需要的css文件,你可以在下载地址上选择下载全部css,或者使用在线的Create custom build来生成自定义的css。
下载后将animate.css样式表引入你调用的HTML文件即可,如下:
<link rel="stylesheet" type="text/css" href="css/animate.min.css" media="screen" />
当你引用以上CSS后,你可以在页面中添加相关class即可,如下:
<div id="demo" class="animated tada">Animate.css Demo</div>
添加class “animated tada“到id=”demo“的元素。注意:这里tada是动画类型,你可以选择多达将近60种不同的css动画特效。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030172/649881bd73cccefaffe5e4be6500a5a6.jpg)
以上是静态页面中的使用,如果你需要动态的调用,你可以使用类似jQuery的类库来使用addClass()方法调用动画。
这里我们使用jQuery和animate.css开发一个简单的小游戏,你需要在指定的时间内将汽车挪出铁箱。代码如下:
Javascript
我们使用addClass来操作动画,使用setTimeout来控制特定时间内的动作,代码如下:
$('#msg').hide(0).html('Click the car to run away').fadeIn(200); $('#car').show().addClass('fadeInRightBig').delay(1200).queue(function(next){ $(this).removeClass('fadeInRightBig'); next(); $(this).addClass('wobble'); }); var timer = window.setTimeout(function(){ $('#bridge').addClass('hinge'); $('#msg').hide().html('Oops, You are dead man! <div><a href="index.html">try it again?</a></div>').css({color:'red'}).fadeIn(); }, 5000 ); $('#car').click(function(){ clearTimeout(timer); $(this).delay(800).addClass('lightSpeedOut').queue(function(next){ $(this).removeClass(''); next(); $('#bridge').addClass('hinge').delay(2200).queue(function(next){ next(); }); }); $('#msg').hide().html('Congratulaions! Fast enough!').css({color:'green'}).fadeIn(); });
HTML代码
html代码很简单:
<div id="msg"></div> <div id="bridge" class="animated"> <div id="car" class="animated"></div> </div>
CSS代码
定义了汽车和箱柜的样式:
#car{ padding: 10px; background: #202020; color: #fff; width: 400px; height: 220px; border-radius: 5px; background: url('images/car.png') no-repeat center bottom; margin: 0 auto; display:none; z-index: 10; position: static; } #bridge{ border-radius: 15px; background: url('images/bridge.png') no-repeat 50% 50%; margin: 0 auto; width: 400px; height: 250px; z-index: 20; position: static; } #msg{ border-radius: 15px; width: 600px; margin: 100px auto; text-align: center; font-size: 38px; font-weight: bold; font-family: Arial; background: #333; color: #EEEEEE; } #msg a{ color: #CCC; }
希望大家喜欢这个小游戏,如果你有任何问题和建议,请给我们留言!
相关文章推荐
- 超棒的跨浏览器纯CSS动画实现 - Animate.css
- animate.css动画库使用方法介绍
- 使用Animate.css和wow.js,实现各大网站常用的页面加载动画
- 超棒的跨浏览器纯CSS动画实现 - Animate.css
- UIView animateWithDuration 使用详解(实现动画效果)
- jquery实现不同大小浏览器使用不同的css样式表的方法
- IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
- iOS使用xib手动实现动画效果的方法
- 超棒的跨浏览器纯CSS动画实现 - Animate.css
- jQuery动画animate方法使用介绍
- JS获取当前使用的浏览器名字以及版本号实现方法
- css3动画简介以及动画库animate.css的使用
- IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
- 使用CSS实现文字的竖排的简单方法
- 【技巧】Animate.css动画库的简单使用
- 使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
- 使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法?
- [原]CSS Animate 动画实现结束后…
- jQuery动画animate方法使用介绍