CSS3练习--工具菜单 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><a class="home" href="javascript:;"><span>home</span></a></li>
        <li><a class="about" href="javascript:;"><span>about</span></a></li>
        <li><a class="services" href="javascript:;"><span>services</span></a></li>
        <li><a class="portfolio" href="javascript:;"><span>portfolio</span></a></li>
        <li><a class="contact" href="javascript:;"><span>contact</span></a></li>
    </ul>
</body>
</html>
*{margin:0;padding:0;}
    body{background-color:#000;}
    ul{list-style:none;margin:200px;}
    li{width:38px;height:39px;padding:3px 0;position:relative;}
    a{display:block;width:38px;height:39px;background: url(http://www.100sucai.com/democode/1/img/navigation.jpg) no-repeat;}
    .home{}
    .about{background-position:-38px 0}
    .services{background-position:-76px 0}
    .portfolio{background-position:-114px 0}
    .contact{background-position:-152px 0}
    span {width: 0;left: 38px;position: absolute;overflow: hidden;font-family: 'Myriad Pro';font-size: 18px;font-weight: bold;line-height: 39px;text-align: center;-webkit-transition: 0.25s;-moz-transition: 0.25s;transition: 0.25s;}
    .home span{background-color:#7da315;color:#3d4f0c;text-shadow:1px 1px 0 #99bf31;}
    .about span{background-color:#1e8bb4;color:#223a44;text-shadow:1px 1px 0 #44a8d0;}
    .services span{background-color:#c86c1f;color:#5a3517;text-shadow:1px 1px 0 #d28344;}
    .portfolio span{background-color:#d0a525;color:#604e18;text-shadow:1px 1px 0 #d8b54b;}
    .contact span{background-color:#af1e83;color:#460f35;text-shadow:1px 1px 0 #d244a6;}
    a:hover span{width:120px;}

 

posted @ 2015-05-21 22:38  xiaojiu  阅读(186)  评论(0)    收藏  举报