Home > Article > Web Front-end > css3制作立体导航_html/css_WEB-ITnose
css3制作立体导航_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:051379browse
慕课网学到的用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);
<!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> 送上一张配色图：
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：【CSS3】CSS3 滤镜实现_html/css_WEB-ITnoseNext article：[后端人员耍前端系列]Boostrap篇：30分钟快速掌握Bootstrap_html/css_WEB-ITnose