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 定义了图片放大的比例