CSS 制作的导航菜单

样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS制作立体导航 me</title>
    <style type="text/css">
       body{
           background: #ebebeb;
       }
        .nav{
            width:560px;
            height:50px;
            border-radius: 10px;
            font:bold 0/50px Arial;
            margin:40px auto 0;
            text-align: center;
            background: #f65f57;
            box-shadow: 0 4px 0 0 red;
        }
        .nav  li{
            position: relative;
            display: inline-block;
            font-size:13px;
            list-style: none outside none;
            padding:0 16px;
            text-shadow:1px 2px 4px rgba(0,0,0,.5);
        }
        .nav a{
            text-decoration: none;
            color:white;
        }
        .nav li::before,
        .nav li::after{
            content:"";
            position: absolute;
            top:14px;
            height:25px;
            width:1px;
        }
        .nav li::after{ /*用伪类after制作出字体后面的白色的效果*/
            right:0;
            background: -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1) 50%,rgba(255,255,255,0));
            background: -moz-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1) 50%,rgba(255,255,255,0));
            background: -o-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1) 50%,rgba(255,255,255,0));
            background: -ms-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1) 50%,rgba(255,255,255,0));
            background: linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1) 50%,rgba(255,255,255,0));
        }
        .nav li::before { /*用伪类before制作出字体前面的黑色的效果*/
            left: 0;
            background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
            background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
            background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
            background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
            background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
        }
         /*删除导航第一个导航项左边的分隔线*/
            .nav li:first-child::before{
                background: none;
            }
         /*删除导航最后一个导航项右边的分隔线*/
        .nav li:last-child::after{
            background: none;
        }
        .nav a{/*动画的方式*/
            display: inline-block;
            -webkit-transition: all 0.2s ease-in;
            -moz-transition: all 0.2s ease-in;
            -o-transition: all 0.2s ease-in;
            -ms-transition: all 0.2s ease-in;
            transition: all 0.2s ease-in;
        }
        .nav a:hover{ /*动画的动作*/
            -webkit-transform:rotate(20deg);
            -moz-transform:rotate(10deg);
            -o-transform:rotate(10deg);
            -ms-transform:rotate(10deg);
            transform:rotate(10deg);
            color:blue;
        }

    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="">Home</a></li>
        <li><a href="">About me </a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Resources</a></li>
        <li><a href="">Contact me</a></li>
    </ul>
</body>
</html>

 

posted @ 2018-03-04 20:45  potato~e-e  阅读(379)  评论(0)  编辑  收藏  举报