会抖动的导航栏

来源：互联网发布：aoc和三星知乎编辑：程序博客网时间：2024/05/17 04:36

导航栏

关于导航栏,有很多样式,今天给大家一个样式,感觉蛮不错的,分享给大家,代码可以直接使用!

下面是代码

<!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页面里面用浏览器打开,蛮不错的,喜欢的朋友点个赞!!!

0 0