鼠标经过按钮,图片缓慢变大效果

<style type="text/css">
    .box{
        width:50%;
        max-height: 500px;
        overflow: hidden;    
    }
    .box img{
        height: 500px;
        transition: all 1s ease 0s;
        -ms-transition: all 1s ease 0s; /* IE 9 */
        -o-transition: all 1s ease 0s; /* Opera */
        -moz-transition: all 1s ease 0s; /* Firefox */
        -webkit-transition: all 1s ease 0s; /* Safari 和 Chrome */
    }
    .box:hover img{
        transform: scale(2,2);
        -ms-transform:all 1s scale(2,2);    /* IE 9 */
        -webkit-transform: scale(2,2);    /* Safari 和 Chrome */
        -o-transform: scale(2,2);    /* Opera */
        -moz-transform: scale(2,2);    /* Firefox */
    }
</style>
<div class="box">
    <img src="2.jpg" alt="" />
</div>

 

posted @ 2016-12-30 17:09  夏小夏吖  阅读(281)  评论(0编辑  收藏  举报