超链接hover切换效果 

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
                <title>css3制作经验hover切换效果</title>
                <style type="text/css">
                        body, html {
                                margin:0; padding:0; overflow:hidden; height:100%; width:100%; background:orange; font-size:12px;
                        }
                        .clear {
                                clear:both;
                        }
                        .container {
                                width:100px; height:100px; position:relative; overflow:hidden; text-shadow:0px 0px 5px orange; text-align:center; line-height:100px; font-size:2rem; float:left; margin-left:20px; margin-top:20px;
                        }
                        .container .before, .container .after {
                                width:100%; height:100%; border-radius:50%; position:absolute; top:0px; left:0px; transition-duration:0.35s; -webkit-transition-duration:0.35s;  -moz-transition-duration:1s; -o-transition-duration:1s;
                        }
                        /*默认行为*/
                        .container .before {
                                background:white; left:0px; color:black; 
                        }
                        .container .after {
                                background:black; left:100%; color:#fff;
                        }
                        .container:hover .before {
                                left:-100%;
                        }
                        .container:hover .after {
                                left:0%;
                        }
                        /*demo1 由左而右*/
                        .container.demo1 .before {
                                left:0px;
                        }
                        .container.demo1 .after {
                                left:-100%;
                        }
                        .container.demo1:hover .before {
                                left:100%;
                        }
                        .container.demo1:hover .after {
                                left:0%;
                        }
                        /*demo2 由上而下*/
                        .container.demo2 .before {
                                left:0px;
                        }
                        .container.demo2 .after {
                                top:-100%; left:0px;
                        }
                        .container.demo2:hover .before {
                                top:100%; left:0px;
                        }
                        .container.demo2:hover .after {
                                top:0%;
                        }
                        /*demo3 由下而上*/
                        .container.demo3 .before {
                                left:0px;
                        }
                        .container.demo3 .after {
                                top:100%; left:0px;
                        }
                        .container.demo3:hover .before {
                                top:-100%; left:0px;
                        }
                        .container.demo3:hover .after {
                                top:0%;
                        }
                        /*demo4 扁的由下而上*/
                        .container.demo4 .before {
                                left:0px;
                        }
                        .container.demo4 .after {
                                top:100%; left:0px;
                        }
                        .container.demo4:hover .before {
                                height:0px;
                        }
                        .container.demo4:hover .after {
                                top:0%; 
                        }
                        /*demo5 扁的由上而下*/
                        .container.demo5 .before {
                                left:0px;
                        }
                        .container.demo5 .after {
                                top:-100%; left:0px;
                        }
                        .container.demo5:hover .before {
                                height:0px; top:100%;
                        }
                        .container.demo5:hover .after {
                                top:0%; 
                        }
                        /*demo6 扁的由左而右*/
                        .container.demo6 .before {
                                left:0px;
                        }
                        .container.demo6 .after {
                                top:0%; left:-100%;
                        }
                        .container.demo6:hover .before {
                                width:0px; left:100%;
                        }
                        .container.demo6:hover .after {
                                left:0%; 
                        }
                        /*demo7 扁的由右而左*/
                        .container.demo7 .before {
                                left:0px;
                        }
                        .container.demo7 .after {
                                top:0%; left:100%;
                        }
                        .container.demo7:hover .before {
                                width:0px;
                        }
                        .container.demo7:hover .after {
                                left:0%; 
                        }
                        /*demo8 */
                        .container.demo8 .before {
                                left:0px;
                        }
                        .container.demo8 .after {
                                left:0%; -webkit-transform:scale(0);
                        }
                        .container.demo8:hover .before {
                                -webkit-transform:scale(0);
                        }
                        .container.demo8:hover .after {
                                -webkit-transform:scale(1);
                        }
                        /*demo9 */
                        .container.demo9 .before {
 
                        }
                        .container.demo9 .after {
                                top:100%; left:100%;
                        }
                        .container.demo9:hover .before {
                                width:0%; height:0%;
                        }
                        .container.demo9:hover .after {
                                left:0%; top:0%;
                        }
                        /*demo10 */
                        .container.demo10 .before {
 
                        }
                        .container.demo10 .after {
                                top:100%; left:-100%;
                        }
                        .container.demo10:hover .before {
                                width:0%; height:0%;
                        }
                        .container.demo10:hover .after {
                                left:0%; top:0%;
                        }
                        /*demo11 */
                        .container.demo11 .before {
 
                        }
                        .container.demo11 .after {
                                top:-100%; left:-100%;
                        }
                        .container.demo11:hover .before {
                                width:0%; height:0%;
                        }
                        .container.demo11:hover .after {
                                left:0%; top:0%;
                        }
                        /*demo12 */
                        .container.demo12 .before {
 
                        }
                        .container.demo12 .after {
                                top:-100%; left:100%;
                        }
                        .container.demo12:hover .before {
                                width:0%; height:0%;
                        }
                        .container.demo12:hover .after {
                                left:0%; top:0%;
                        }
                </style>
        </head>
        <body>
                <div class="clear">
                        <div class="container">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                        <div class="container demo1">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                        <div class="container demo2">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                        <div class="container demo3">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                </div>
                <!--第二行-->
                <div class="clear" >
                        <div class="container demo4">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                        <div class="container demo5">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                        <div class="container demo6">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                        <div class="container demo7">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                </div>
                <div class="clear">
                        <div class="container demo8">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                </div>
                <div class="clear">
                        <div class="container demo9">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                        <div class="container demo10">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                        <div class="container demo11">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                        <div class="container demo12">
                                <div class="before">
                                        hui52
                                </div>
                                <div class="after">
                                        hui52
                                </div>
                        </div>
                </div>
        </body>
</html>

笔记链接：http://www.w3cfuns.com/blog-5460917-5403445.html

posted @ 2015-01-27 14:33  youguess  阅读(261)  评论(0)  编辑  收藏  举报