<!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> |
分类
css3_nav
