[分享]css3图片悬停放大动画

CSS3提供了丰富的动画效果，其中包括图片悬停放大动画，可以让网页更加生动和有趣。

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

首先，我们需要在CSS中选择图片元素，使用:hover伪类作为悬停触发器。

transform: scale(1.2); 

然后我们使用transform属性来对图片进行变换，其中scale()函数可以对元素进行缩放，这里我们将图片放大1.2倍。

transition: all 0.3s ease-in-out; 

最后，我们通过transition属性来设置动画过渡时间和速度曲线。在这个例子中，我们设置了0.3秒的过渡时间，使用了ease-in-out速度曲线，让动画效果更加平滑自然。

通过使用CSS3图片悬停放大动画，我们可以轻松地为网页添加更多的动态元素，提高用户的交互性和视觉体验。