利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

1.改变background-size属性

   将图片作为某个html元素的背景图片，用transition属性改变图片的大小。

.container{
    background-size: 100% 100%;
    transition: all 2s;    
}
.container:hover{
    background-size: 120% 120%;
}

这种方法有个问题是图片缩放的时候会出现抖动的现象

 

2.利用scale

   使用img标签，并在img标签上添加transform属性改变scale值

img{
   transition: all 2s;
}
img:hover{
   transform: scale(1.2);  
}

这种方法能够获得比较平滑的缩放效果