导航栏
关于导航栏,有很多样式,今天给大家一个样式,感觉蛮不错的,分享给大家,代码可以直接使用!
下面是代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3 导航</title>
<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 class="navMenu clearFix">
<li><a href="#">导航菜单1</a></li>
<li><a href="#">导航菜单2</a></li>
<li><a href="#">导航菜单3</a></li>
<li><a href="#">导航菜单4</a></li>
<li><a href="#">导航菜单5</a></li>
<li><a href="#">导航菜单6</a></li>
<li><a href="#">导航菜单7</a></li>
<li><a href="#">导航菜单8</a></li>
</ul>
</body>
</html>
复制下去,可以直接保存到html页面里面用浏览器打开,蛮不错的,喜欢的朋友点个赞!!!