CSS3——制作带动画效果的小图片

下了一个软件：ScreenToGif用来截取动态图片，终于可以展示我的小动图啦，嘻嘻，敲开心！

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        .box{
            width:249px;
            height:299px;
            margin:50px auto;
            position:relative;
            overflow:hidden;
        }

        .box .pic_info{
            width:249px;
            height:100px;
            background-color: rgba(0,0,0,0.5);
            color:#fff;
            position: absolute;
            left:0;
            top:300px;
            transition:all 500ms ease;
        }

        .box:hover .pic_info{

            top:250px;
        }

        .box .pic_info p{
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="box">
        <img src="images/login.jpg" alt="animal">
        <div class="pic_info"><p>图片说明</p></div>
    </div>

</body>
</html>

 

posted @ 2018-06-11 11:42  高圈圈  阅读(1123)  评论(0)  编辑  收藏  举报