css3制作立体导航_html/css_WEB-ITnose-HTML Tutorial-php.cn

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

WBOY

Release： 2016-06-24 11:30:05

Original

1414 people have browsed it

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

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

经过修改的最终效果图：

涉及css3的知识点包括：

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS制作立体导航</title>    <style>        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;        }    </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>

Copy after login

送上一张配色图：