利用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);
 }

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