[分享]css3实现图片变大变小

CSS3是当前前端开发中不可或缺的技术之一，它带来了许多新的功能和效果，其中包括实现图片变大变小的方法。使用CSS3，我们可以通过在元素上应用一些属性和动画效果来实现图片在鼠标悬停时变大。img:ho...

CSS3是当前前端开发中不可或缺的技术之一，它带来了许多新的功能和效果，其中包括实现图片变大变小的方法。

使用CSS3，我们可以通过在元素上应用一些属性和动画效果来实现图片在鼠标悬停时变大。

img:hover {
  transform: scale(1.2);
  transition: all 0.3s ease-in-out;
} 

上面的代码使用了:hover伪类选择器，表示当鼠标悬停在img标签上时触发。然后使用transform属性，将图片的大小缩放为原来的1.2倍。最后，使用transition属性来实现变换的过渡效果。

如果想要实现恢复原始大小的效果，只需要添加一个嵌套的:hover伪类，并将transform设置回原始值即可：

img:hover:hover {
  transform: scale(1);
  transition: all 0.3s ease-in-out;
} 

这样就能实现图片变大变小的效果了。