前端练习七：hover效果 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .outer {
                width: 256px;
                height: 256px;
                background-image: url(img/timg.jpg);
                background-size: cover;
                background-position: center;
                border-radius: 50%;
                margin: 48px auto;
                font-family: sans-serif;
                position: relative;
                cursor: pointer;
            }
            .wapper {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                text-align: center;
                line-height: 256px;
                color: rgba(255, 255, 255, 0);
                position: absolute;
                transition: all 0.5s;
                background-color: rgba(0,0,0,0);
            }
            .border {
                width: 100%;
                height: 100%;
                border: 12px solid #eee;
                border-left-color: #a18cd1;
                border-top-color: #a18cd1;
                border-radius: 50%;
                position: absolute;
                transition: all 0.5s;
            }
            .outer:hover .border {
                transform: rotate(180deg);
            }
            .outer:hover .wapper {
                color: rgba(255,255,255,1);
                background-color: rgba(0,0,0,.4);
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="wapper">
                Wild Night
            </div>
            <div class="border"></div>
        </div>
    </body>
</html>

 

posted on 2018-12-26 23:03  myworldworld  阅读(487)  评论(0)    收藏  举报

导航