CSS3---制作导航

浏览数：41 / 时间：2015年06月09日

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS制作立体导航</title>
    <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">
    <style>
        body{
          background: #ebebeb;
        }
        .nav{
          width:560px;
          height: 50px;
          font:bold 0/50px Arial;
          text-align:center;
          margin:40px auto 0;
          background: #f65f57;
          /*制作圆*/
          border-radius:10px;
        
          /*制作导航立体风格*/
          box-shadow:0px 6px 0px rgba(99,0,0,0.6);
        }
        .nav a{
          display: inline-block;
          -webkit-transition: all 0.2s ease-in;/*兼容chrome safari*/
          -moz-transition: all 0.2s ease-in;/*兼容firefox*/
          -o-transition: all 0.2s ease-in;/*兼容opera*/
          -ms-transition: all 0.2s ease-in;/*兼容ie*/
          transition: all 0.2s ease-in;
        }
        .nav a:hover{
          -webkit-transform:rotate(10deg);
          -moz-transform:rotate(10deg);
          -o-transform:rotate(10deg);
          -ms-transform:rotate(10deg);
          transform:rotate(10deg);
        }

        .nav li{
          position:relative;
          display:inline-block;
          padding:0 16px;
          font-size: 13px;
          text-shadow:1px 2px 4px rgba(0,0,0,.5);
          list-style: none outside none;
        }
        /*使用伪元素制作导航列表项分隔线*/
        .nav li::before,.nav li::after
        {
            content:‘‘;
            position:absolute;
            top:14px;
            height:25px;
            width:1px;
        }
        .nav li::after{
            right:0;
            background:-moz-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.2) 50%,rgba(255,255,255,0));
            background:-webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.2) 50%,rgba(255,255,255,0));
            background:-o-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.2) 50%,rgba(255,255,255,0));
            background:-ms-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.2) 50%,rgba(255,255,255,0));
            background:linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.2) 50%,rgba(255,255,255,0));
        }
        .nav li::before{
            left:0;
            background:-moz-linear-gradient(top,#ff625a,#9e3e3a 50%,#ff625a);
            background:-webkit-linear-gradient(top,#ff625a,#9e3e3a 50%,#ff625a);
            background:-o-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,.nav li:last-child::after{
            background:none;
        }
    
    
        .nav a,
        .nav a:hover{
          color:#fff;
          text-decoration: none;
        }

    </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>