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 }
这种方法能够获得比较平滑的缩放效果
利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法
原文地址:http://www.cnblogs.com/NickyLi/p/8064934.html