这个插件真的很酷,很多有趣的动画在不同的浏览器使用。
基本用法
1. 加入css
|
1 2 3 |
<head> <link rel="stylesheet" href="animate.min.css"> </head> |
2.添加class animated到你的动画元素。如果你希望效果无限循环你还得加入class infinite。
|
1 |
<h1 class="animated infinite">Example</h1> |
3.最后你加入下列类别之一
bounceflashpulserubberBandshakeswingtadawobblejellobounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingerollInrollOutzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUp
案例如下
|
1 |
<h1 class="animated infinite bounce">Example</h1> |
更多信息请查看
https://github.com/daneden/animate.css
下载和效果请看
