小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
  • html5弹性布局display:flex;的具体用法

    html5弹性布局display:flex;的具体用法

    首先我们来了解一下flex的定义:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。在我们开发网站的时候,碰见如下图两边对齐的时候回很头疼,不管是用cl……
    247人已经看过了
您的位置:首页 > 前端开发 > Htm l+ Css > Html5 + Css3

超炫!66种 css3 animation动画属性案例赏析

分类: Html5 + Css3100个赞

 animation动画属性是CSS3的核心属性之一,它把之前必须flash或者JS才能做出来的效果通过css3都可以做出来, animation动画属性学好了可以延伸很多很特别的效果,让你的网站从此脱颖而出,下面由小米总结66种CSS3animation动画例子分享给大家,希望给正在CSS3学习路上的前端工作者给予帮助:

CSS3:animation兼容性:IE6 IE7 IE8 IE9不支持

(想重新看效果刷新即可:)

调用方法:首先

下载animate.min.css,复制链接下载: http://pan.baidu.com/s/1mg0CLvE 密码: ykbb

其次,在标签class里面加入animated rotateOut,其中animated是必加选项,rotateOut参照如下的效果添加;如:

<div class="animated rotateOut">rotateOut</div>

OK!大功告成!查看效果吧

补充:

其他效果:

1、magic.css:http://www.bbsxiaomi.com/case/css3donghua/magic_css.html(点击查看)

2、CSS3字体动画效果:animate.css http://www.bbsxiaomi.com/case/css3donghua/animate.css.html(点击查看)

3、国外button【扭曲按钮】效果(水滴) http://www.bbsxiaomi.com/case/css3donghua/button-shuidi/  更多效果 查看http://tympanus.net/codrops/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>www.bbsxiaomi.com - 小米技术社区让你尖叫的CSS3动画效果</title>
<meta name="description" content="让你尖叫的CSS3动画效果">
<meta name="keywords" content="让你尖叫的CSS3动画效果">
<link href="http://www.bbsxiaomi.com/case/css/animate.min.css" rel="stylesheet">
<style>
div{float:left;margin:0 4% 30px 0;width:10%;background:red;height:100px;text-align:center;}/* by www.bbsxiaomi.com */
h1{text-align:center;color:#333;}

</style>
</head>
<body>

<h1 class="animated zoomInLeft">www.bbsxiaomi.com 小米技术社区CSS3动画效果</h1>
    <div class="animated bounce" >bounce</div>
    <div class="animated hinge">hinge</div>
    <div class="animated flash">flash</div>
    <div class="animated pulse">pulse</div>
    <div class="animated rubberBand">rubberBand</div>
    <div class="animated shake">shake</div>
    <div class="animated swing">swing</div>
    <div class="animated tada">tada</div>
    <div class="animated wobble">wobble</div>
    <div class="animated bounceIn">bounceIn</div>
    <div class="animated bounceInDown">bounceInDown</div>
    <div class="animated bounceInLeft">bounceInLeft</div>
    <div class="animated bounceInRight">bounceInRight</div>
    <div class="animated bounceInUp">bounceInUp</div>
    <div class="animated bounceOut">bounceOut</div>
    <div class="animated bounceOutDown">bounceOutDown</div>
    <div class="animated bounceOutLeft">bounceOutLeft</div>
    <div class="animated bounceOutRight">bounceOutRight</div>
    <div class="animated bounceOutUp">bounceOutUp</div>
    <div class="animated fadeIn">fadeIn</div>
    <div class="animated fadeInDown">fadeInDown</div>
    <div class="animated fadeInDownBig">fadeInDownBig</div>
    <div class="animated fadeInLeft">fadeInLeft</div>
    <div class="animated fadeInLeftBig">fadeInLeftBig</div>
    <div class="animated fadeInRight">fadeInRight</div>
    <div class="animated fadeInRightBig">fadeInRightBig</div>
    <div class="animated fadeInUp">fadeInUp</div>
    <div class="animated fadeInUpBig">fadeInUpBig</div>
    <div class="animated fadeOut">fadeOut</div>
    <div class="animated fadeOutDown">fadeOutDown</div>
    <div class="animated fadeOutDownBig">fadeOutDownBig </div>
    <div class="animated fadeOutLeft">fadeOutLeft</div>
    <div class="animated fadeOutLeftBig">fadeOutLeftBig</div>
    <div class="animated fadeOutRight">fadeOutRight</div>
    <div class="animated fadeOutRightBig">fadeOutRightBig</div>
    <div class="animated fadeOutUp">fadeOutUp</div>
    <div class="animated fadeOutUpBig">fadeOutUpBig</div>
    <div class="animated animated.flip">animated.flip</div>
    <div class="animated flipInX">flipInX</div>
    <div class="animated flipInY">flipInY</div>
    <div class="animated flipOutX">flipOutX</div>
    <div class="animated flipOutY">flipOutY</div>
    <div class="animated lightSpeedIn">lightSpeedIn</div>
    <div class="animated lightSpeedOut">lightSpeedOut</div>
    <div class="animated rotateIn">rotateIn</div>
    <div class="animated rotateInDownLeft">rotateInDownLeft</div>
    <div class="animated rotateInDownRight">rotateInDownRight</div>
    <div class="animated rotateInUpLeft">rotateInUpLeft</div>
    <div class="animated rotateInUpRight">rotateInUpRight</div>
    <div class="animated rotateOut">rotateOut</div>
    <div class="animated rotateOutDownLeft">rotateOutDownLeft</div>
    <div class="animated rotateOutDownRight">rotateOutDownRight</div>
    <div class="animated rotateOutUpLeft">rotateOutUpLeft</div>
    <div class="animated rotateOutUpRight">rotateOutUpRight</div>
    <div class="animated hinge">hinge</div>
    <div class="animated rollIn">rollIn</div>
    <div class="animated rollOut">rollOut</div>
    <div class="animated zoomIn">zoomIn</div>
    <div class="wow animated zoomInDown">zoomInDown</div>
    <div class="wow animated zoomInLeft">zoomInLeft</div>
    <div class="wow animated zoomInRight">zoomInRight</div>
    <div class="wow animated zoomInUp">zoomInUp</div>
    <div class="wow animated zoomOut">zoomOut</div>
    <div class="wow animated zoomOutDown">zoomOutDown</div>
    <div class="wow animated zoomOutLeft">zoomOutLeft</div>
    <div class="wow animated zoomOutRight">zoomOutRight</div>
    <div class="wow animated zoomOutUp">zoomOutUp</div>
<script src="http://www.bbsxiaomi.com/case/js/wow.min.js"></script> 
<script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    new WOW().init();
};
</script>

   <!--  by www.bbsxiaomi.com 小米技术社区 -->
</body>
</html>


小米技术社区

本站内容均为小米原创,转载请注明出处:小米技术社区>> 超炫!66种 css3 animation动画属性案例赏析