如何使用 CSS 创建悬停动画旋转或旋转图像？

如何使用 CSS 创建悬停动画旋转或旋转图像

悬停时旋转或旋转图像是一种常见且具有视觉吸引力的效果从而提高用户参与度。要使用 CSS 实现此效果，请按照下列步骤操作：

首先，确保图像具有圆形边框。这可以通过将 border-radius 设置为 50% 来完成，如以下代码所示：

<code class="css">img {
  border-radius: 50%;
}</code>

接下来，将 CSS3 动画添加到图像的 Transform 属性。 transition 可以实现状态之间的平滑过渡，而rotate() 应用所需的旋转效果：

<code class="css">img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}</code>

在此示例中，图像在悬停时旋转完整 360 度，创建平滑的旋转效果。您可以调整旋转（）角度来自定义旋转量。

出于演示目的，这里有一个示例 HTML 代码片段：

<code class="html"><img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/BLkKe.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="如何使用 CSS 创建悬停动画旋转或旋转图像？" ></code>

通过组合这些 CSS 和 HTML 元素，您可以有效地创建悬停动画旋转或旋转图像。

以上是如何使用 CSS 创建悬停动画旋转或旋转图像？的详细内容。更多信息请关注PHP中文网其他相关文章！