html中图片划过的代码

在 HTML 中，为了让图片有更多的交互性，我们可以使用鼠标滑过图片时触发一定的效果。以下是一个简单的示例，当鼠标滑过图片时，图片周围将出现一条边框。

  <style>
    img:hover {
      border: 1px solid red;
    }
  </style>

  <img src="image.jpg">

首先，在 <style> 标签里面，我们定义了鼠标悬停在图片上方时出现的效果。这里的 :hover 是伪类选择器，表示当鼠标悬停在图片上方时触发效果。

然后，在 <img> 标签里，我们设置图片的路径。当鼠标悬停在这张图片上方时，就会出现一个红色边框，从而实现了图片的划过效果。

当然，除了设置边框，我们还可以在图片周围设置阴影、缩放等效果，让图片更加生动有趣。这个需要根据具体的需求和实际情况进行调整。

  <style>
    img:hover {
      Box-shadow: 0 0 10px rgba(0,0.5);
      transform: scale(1.1);
    }
  </style>

  <img src="image.jpg">

在这个代码段中，我们使用了 Box-shadow 和 transform 属性，分别设置了图片周围的阴影以及图片的缩放效果。可以看到，当鼠标悬停在这张图片上方时，图片周围出现阴影，同时整个图片缩放了 1.1 倍，营造出了一个更加具有交互性的效果。

总之，图片划过效果可以让页面更加动态和生动，提升用户体验和互动性。通过适当的调整和优化，我们可以实现各种不同类型的图片划过效果，让页面更加出彩。