分类
WEB++技术

css3_nav

    <!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>

unicac

...long long ago,he have a dream.

发表评论

邮箱地址不会被公开。 必填项已用*标注