css3鼠标移到图片

CSS3鼠标移到图片可以实现图片的动态效果，增加网页的交互性和美观度。

<img src="picture.jpg" alt="图片" class="img-hover" />

.img-hover {
  transition: transform 0.5s;
}
.img-hover:hover {
  transform: scale(1.1);
} 

以上代码通过给图片添加类名img-hover，在鼠标移到图片上时实现了一种放大、缩小的效果。其中，transition属性用于设置过渡效果，transform属性控制缩放大小。使用:hover选择器可以让效果只在鼠标移到图片上时出现。

我们也可以通过一些其他的CSS3属性为鼠标移到图片添加更多的特效，例如：

.img-hover {
  filter: grayscale(100%);
}
.img-hover:hover {
  filter: none;
} 

以上代码实现了一种在鼠标移到图片上时变为黑白、离开后恢复的效果。其中，filter属性可以对图片进行滤镜处理。

通过CSS3鼠标移到图片的特效，我们可以为网页添加更多的互动和视觉冲击力。在设计网站时，合理使用CSS3特效可以让网页更加吸引人并提高用户的体验。