css3 hover图片放大

在网页设计中，鼠标悬停效果是非常常见的，其中一种效果是图片放大。而CSS3中，我们可以使用transform的scale()方法来达到这个效果。

img:hover {
        transform: scale(1.2);
}

上述代码表示当鼠标悬停在图片上时，将图片放大1.2倍。

当然，我们也可以加上过渡效果，使图片变化过程更加平滑。

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

上述代码中，transition属性表示过渡效果，transform表示过渡的属性为transform，0.2s表示过渡时间为0.2秒，ease-in-out为过渡效果的速度曲线。这样，在图片放大时，就会有一个平滑的过渡效果。

除了放大效果，CSS3还支持其他鼠标悬停效果，例如旋转、缩小等等。在实际项目中，可以根据需要灵活运用这些效果，来丰富网页的交互性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！