会抖动的导航栏

最新推荐文章于 2018-01-04 13:52:40 发布

Love丶兰

最新推荐文章于 2018-01-04 13:52:40 发布

阅读量780

点赞数

分类专栏： jquery html javascript 文章标签： html 导航栏 jquery javascript

jquery 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

javascript

15 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

导航栏

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

下面是代码

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