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 }
这种方法能够获得比较平滑的缩放效果