css3 hover效果

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    a {
        text-decoration: none;
        color: #333;
    }
    
    .box {
        width: 55px;
        height: 55px;
        overflow: hidden;
        display: block;
    }
    
    .box img {
        width: 55px;
        height: 55px;
        display: block;
        border-radius: 5px;
        float: left;
    }
    
    .box i {
        width: 55px;
        height: 55px;
        display: block;
        text-align: center;
        color: #888;
        font-size: 20px;
        line-height: 55px;
        transition: all .3s linear;
        -webkit-transition: all .3s linear;
        -moz-transition: all .3s linear;
        -o-transition: all .3s linear;
        -ms-transition: all .3s linear;
        font: normal 24px/55px Arial, Helvetica, sans-serif;
        background-color: #3F6F12;
    }
    
    .box:hover i {
        height: 0;
        line-height: 150px;
    }
    </style>
</head>

<body>
    <div class="box">
        <i>1</i>
        <img src="http://pic.2265.com/upload/2017-3/2017331931498082.png" />
    </div>
</body>

</html>

效果图：

hover效果

 

posted @ 2017-05-25 23:29  前端HL  阅读(398)  评论(0)  编辑  收藏  举报