css3制作立体导航_html/css_WEB-ITnose

慕课网学到的用css3制作立体导航，受益匪浅，配合前段时间学的二级导航，有空试，哈哈！

内容简单，但伪类after的使用需要注意！

经过修改的最终效果图：

涉及css3的知识点包括：

圆角特效：border-radius: 10px; 

盒子阴影：box-shadow: 2px 5px 0px #0000cc; 

文字阴影：text-shadow:1px 2px 4px rgba(0,0,0,.5); 

动画过渡：transition: all 0.2s ease-in; 

动画效果-旋转：transform:rotate(10deg); 

颜色线性渐变背景：background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff); 

             CSS制作立体导航              body{            background: #ebebeb;        }        *{margin: 0;padding: 0;}        .nav{            text-align: center;            width: 615px;            height: 50px;            margin:40px auto 0;            background: #3333ff;            border-radius: 10px;            box-shadow: 2px 5px 0px #0000cc;        }        .nav li{            height: 50px;            line-height: 50px;            width: 100px;            float: left;            list-style: none;            position:relative;            display:inline-block;            font-size: 13px;            text-shadow:1px 2px 4px rgba(0,0,0,.5);        }        .nav a{            display: inline-block;            text-decoration: none;            -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(10deg);            -moz-transform:rotate(10deg);            -o-transform:rotate(10deg);            -ms-transform:rotate(10deg);            transform:rotate(10deg);        }        .nav li:after{            content: "";            position: absolute;            height: 20px;            top:15px;            width: 1px;            right: 0px;            -webkit-background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);            -moz-background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);            -o-background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);            -ms-background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);            background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);        }        .nav li:last-child:after{            background: none;        }        .nav a,        .nav a:hover{            color:#fff;            text-decoration: none;        }                     Home          About Me          Portfolio          Blog          Resources          Contact Me         

送上一张配色图：

查看更多关于css3制作立体导航_html/css_WEB-ITnose的详细内容...