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

1.改变background-size属性

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

1 .container{
2     background-size: 100% 100%;
3     transition: all 2s;    
4 }
5 .container:hover{
6     background-size: 120% 120%;
7 }

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

 

2.利用scale

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

1 img{
2    transition: all 2s;
3 }
4 img:hover{
5    transform: scale(1.2);  
6 }

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

 

转载于:https://www.cnblogs.com/NickyLi/p/8064934.html