css3鼠标经过图片由中心缓慢放大或缩小
html代码
<div class="item"><img src="/tpl/oli/block/product/img/product.jpg"></div>
css代码
.item{
border:1px solid #eee;
overflow:hidden;
}
.item img{
display:block;
width:100%;
transition: .2s ease-in-out;
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
}
.item img:hover{
transform:scale(1.1);
}说明:
transition 定义了动画的时间及特效
transform:scale 定义了图片放大的比例