css3制作立体导航_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:30:051378검색
慕课网学到的用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> 送上一张配色图：
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.