css3 鼠标图片变大

在CSS3中，我们可以使用:hover伪类实现鼠标滑过时图片变大的效果。

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

上述代码中，我们使用了transform属性的scale函数，将图片的大小增大了20%。

除了使用scale函数，我们还可以使用box-shadow属性实现图片变大的效果，代码如下：

img:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

上述代码中，我们使用了box-shadow属性的模糊效果，使图片周围出现一个渐变的阴影，从而实现了图片变大的效果。

除了上述两种方法，我们还可以使用transition属性，使图片在鼠标移过时缓慢变化大小，代码如下：

img {
    transition: transform 0.5s ease;
}
img:hover {
    transform: scale(1.2);
}
    

上述代码中，我们使用了transition属性的ease函数，使图片变化过程更加平滑。

综上所述，我们可以使用以上几种方法实现鼠标滑过时图片变大的效果，使网页更加生动有趣。

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