0
点赞
收藏
分享

微信扫一扫

带37种3D动画特效的跨浏览器CSS3动画框架 AllAnimation.css


animate.css – 齐全的CSS3动画库 [url]http://www.dowebok.com/98.html[/url]
animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。


带37种3D动画特效的跨浏览器CSS3动画框架 AllAnimation.css
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架。它可以轻松的制作出各种CSS3 3D动画效果,可以在移动手机上使用。并且使用极其简单,使用时只需要添加相应的class即可。


例子: [url]http://all-animation.github.io/[/url]
所有效果代码

Especiais:

dance

journal

pulse

pulse-slow

jamp

four-rock


Bounce:

enter-up-bounce

enter-down-bounce

enter-right-bounce

enter-left-bounce

scale-bounce

jump-bounce


Perspective:

tree-flip-right

tree-flip

tree-flip-up

tree-flip-down

flip-left-bounce

rotate-flip

flip-right-bounce


Fading Entrances:

flip-top

flip-left

flip-right

flip-bottom



Rotate:

rotate-flip-down

rotate-down-bounce

rotate-out


Agrecives:

flash-bang

bomba




测试代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>重新认识测试和米色脂肪</title>
<link href="css/assets/css/all-animation.min.css" rel="stylesheet"/>
<script src="js/jquery-2.2.0.min.js"></script>
<script>
	$(document).ready(function(){
		$("button").click(function(e){
		    e.preventDefault();
		    $("#stage").addClass('journal');
		});
	});
</script>
</head>
<body ontouchmove="return false" class="f-ff1">
<button>测试</button>
<div id="stage">被用来测试的一段话</div>
</body>
</html>

举报

相关推荐

0 条评论