纯CSS3实现动态导航栏目
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试一下</title> </head> <style> *{ padding:0; margin: 0; } .top-nav{ width:900px; margin:0 auto; border: 1px solid #222; background-image:linear-gradient(#444,#111); border-radius: 6px; box-shadow: 0 1px 1px #777; padding:0; list-style: none; /*overflow: hidden;*/ overflow: visible; } .top-nav:before,.top-nav:after{ content: ""; display:table; } .top-nav:after{ clear:both; } .top-nav li{ float: left; border-right: 1px solid #222; box-shadow: 1px 0 0 #444; position:relative; } .top-nav li a { float:left; padding:12px 30px; color:#999; font:bold 12px; text-decoration: none; text-shadow: 0 1px 0 #000; } .top-nav li a:hover{ color:#fafafa; } .top-nav li ul{ visibility:hidden; position: absolute; list-style: none; top:41px; left:0; z-index: 1; padding:0; background-color: #444; background-image: linear-gradient(#444,#111); box-shadow: 0 -1 0 rgba(255,255,255,.3); border-radius: 3px; opacity: 0; margin:20px 0 0 0; transition:all .2s ease-in-out; } .top-nav li:hover >ul{ opacity:1; visibility: visible; margin: 0; } .top-nav ul li{ float: none; display:block; border:0; box-shadow: 0 1px 0 #111 ,0 2px 0 #666; } .top-nav ul a{ padding:10px; width:130px; display: block; float: none; } .top-nav ul a:hover{ background-color: #0186ba; background-image:liner-gradient(#04acec,#0186ba); } .top-nav ul li:first-child>a{ border-radius: 3px 3px 0 0; } .top-nav ul li :last-child>a{ border-radius:0 0 3px 3px; } .top-nav ul li :first-child > a:before{ content:""; position:absolute; left:40px; top:-6px; border-bottom:6px solid #0299d3; border-left:6px solid transparent; border-right:6px solid transparent; } .top-nav ul li :first-child > a:before{ border-bottom-color:#04acec; } .top-nav ul ul { top:0; left:150px; margin:0 0 0 20px; box-shadow: -1px 0 0 rgba(255,255,255,.3); } .top-nav ul ul li:first-child a:before{ left:-6px; top:50%; margin-top:-6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } .top-nav ul ul li:first-child a:hover:before{ border-right-color: #0299d3; border-bottom-color:transparent; } </style> <body> <ul class="top-nav"> <li><a href="#">慕课网</a></li> <li><a href="#">课程大厅</a></li> <li><a href="#">学习中心</a> <ul> <li><a href="#">前端课程</a> <ul> <li><a href="#">html</a></li> <li><a href="#">javascript</a></li> <li><a href="#">css</a></li> </ul> </li> <li ><a href="#">手机开发</a></li> <li ><a href="#">后台编程</a></li> </ul> </li> <li><a href="">关于我们</a></li> </ul> </body> </html>
css3实现动画导航菜单尖角
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画导航尖角</title> <style> .box{ display: block; width: 0; border-bottom: 10px solid red; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid transparent; } </style> </head> <body> <div class="box"></div> </body> </html>
