<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>css3_nav</title> <style type="text/css"> *{margin:0;padding:0;} body{background-color:#111;} a{text-decoration:none;color:#181818;text-shadow: rgba(255, 255, 255, .2) 0 1px 0;} #nav{padding-left:5px;margin:100px;overflow:hidden;zoom:1;} #nav li{position:relative;float:left;margin-bottom:10px;height:36px;font:700 16px/36px Arial;clear:both;} #nav li a{display:block;padding-left:36px;width:0;overflow:hidden;background: rgba(255, 255, 255, .2);-webkit-transition:.25s;-moz-transition:.25s;-o-transition:.25s;transition:.25s;} #nav li a:after{position:absolute;left:0;top:0;height:36px;width:36px;overflow:hidden;text-align:center;content:"♠";font-size:36px;line-height:30px; background: -webkit-linear-gradient(top, #fff, #ccc); background: -moz-linear-gradient(top, #fff, #ccc); background: -o-linear-gradient(top, #fff, #ccc); box-shadow:inset 0 0 0 1px #fff; } #nav .heart a:after{content:"♥";font-size:34px;line-height:34px;} #nav .club a:after{content:"♣";font-size:34px;} #nav .diamond a:after{content:"♦";} #nav li a:hover{padding:0 14px 0 50px;width:auto;} #nav li a:hover:after{box-shadow:inset 0 0 0 1px #fff,0 0 8px rgba(000, 000, 000, .8);} </style> </head> <body> <ul id="nav"> <li class="spade"> <a href="#" title="">Spade</a> </li> <li class="heart"> <a href="#" title="">Heart</a> </li> <li class="diamond"> <a href="#" title="">Diamond</a> </li> <li class="club"> <a href="#" title="">Club</a> </li> </ul> </body> </html> |
分类