CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原

代码

css
.newli_img{
    width: 231px;
    height: 149px;
    overflow: hidden;
}
.newli_img:hover img{
    -webkit-transform:scale(1.2);/*在Safari 和 Chrome兼容下还原*/
    -moz-transform:scale(1.2);/*在Firefox兼容下还原*/
    -ms-transfrom:scale(1.2);/*在IE9兼容下还原*/
    -o-transform:scale(1.2);/*在opera兼容下还原*/
    transform:scale(1.2);/*适用于所有浏览兼容下还原*/
}
img.p_img{ 
    width: 231px;
    height: 149px;
    -webkit-transition:0.5s all;/* 适用Safari 和 Chrome兼容 */
    -moz-transition:0.5s all;/* 适用Firefox兼容 */
    -ms-transition:0.5s all;/* 适用IE9兼容 */
    -o-transition:0.5s all;/* Opera */
    transition: .5s;
}
!!!注意主要是时间写在目标元素上 鼠标离开就也可以缓慢还原
 
html

 

你可能感兴趣的:(Css3)