首页 > 服务器 >

CSS3动画案例—抖动导航

发布时间：2014-08-25 编辑：杨雨个人博客网站点击：

<!doctype html>

<html>

<head>

<style>

*{ padding:0; margin:0;}

body{ font-size:12px; font-family:"宋体", Arial; color:#333;}

ul{ list-style:none;}

a{ color:#333; text-decoration:none;}

a:hover{ text-decoration:underline;}

.clearFix{*zoom:1;}

.clearFix:after{ clear:both; display:block; content:''; height:0; overflow:hidden;}

.navMenu{ padding:0 10px; height:38px; line-height:38px; background:#f6f6f6; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}

.navMenu li{ float:left; font-family:"微软雅黑"; font-size:14px; font-weight:bold;}

.navMenu li a{ display:inline-block; padding:0 20px;}

.navMenu li a:hover{ color:#f60; text-decoration:none; -webkit-animation:swing .8s ease .2s normal; -moz-animation:swing .8s ease .2s normal; -o-animation:swing .8s ease .2s normal;}

@-webkit-keyframes swing{

0%,20%,40%,60%,80%,100%{-webkit-transform-origin:top center}

20%{-webkit-transform:rotate(15deg)}

40%{-webkit-transform:rotate(-10deg)}

60%{-webkit-transform:rotate(5deg)}

80%{-webkit-transform:rotate(-5deg)}

0%,100%{-webkit-transform:rotate(0deg)}

}

@-moz-keyframes swing{

0%,20%,40%,60%,80%,100%{-moz-transform-origin:top center}

20%{-moz-transform:rotate(15deg)}

40%{-moz-transform:rotate(-10deg)}

60%{-moz-transform:rotate(5deg)}

80%{-moz-transform:rotate(-5deg)}

0%,100%{-moz-transform:rotate(0deg)}

}

@-o-keyframes swing{

0%,20%,40%,60%.80%,100%{ -o-transform-origin:top center;}

20%{-o-transform:rotate(15deg)}

40%{-o-transform:rotate(-10deg)}

60%{-o-transform:rotate(5deg)}

80%{-o-transform:rotate(-5deg)}

0%,100%{-o-transform:rotate(0deg)}

}

</style>

</head>

<body>

</ul>

</body>

</html>

保存成html试试效果吧！

以chrome的webkit为例，简单的说明一下：
-webkit-animation:swing .8s ease .2s normal;
此句代码是指swing动画先停留0.2秒然后以正常速度开始播放，到0.8秒结束动画。

CSS3 @keyframes 规则

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

浏览器支持情况：
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。

注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

CSS3 动画
当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：(这里是从0%【动画开始】到100%【动画结束】之间过渡)

@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。

本文地址：http://itbyc.com/server/2302.html
转载请注明出处。

分享是一种快乐，也是一种美德:

上一篇：十大基于Docker的开发工具

下一篇：Apache 虚拟主机 VirtualHost 配置

与《CSS3动画案例—抖动导航》相关文章

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）