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

pyzheng

浏览: 3420857 次
性别:
来自: 珠海

最近访客更多访客>>

kopomimi

oszerone

lindow

leisure0422

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2016-06 ( 26)
2016-05 ( 32)
2016-04 ( 33)
更多存档...

博客分类：

前台&美工

animate.css – 齐全的CSS3动画库 http://www.dowebok.com/98.html
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即可。

例子： http://all-animation.github.io/
所有效果代码
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>

分享到：

jQuery动画插件： Velocity.js | 微信JS-SDK获取signature签名以及config配 ...

2016-02-16 13:13
浏览 1735
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论