如何使用 CSS 在悬停时旋转图像？

悬停触发的图像旋转

对于许多 Web 应用程序，需要添加交互式动画效果以增强用户参与度。其中一种效果是当用户将鼠标悬停在图像上时旋转图像。本文演示了如何在圆形图像上使用 CSS 来实现此功能。

图像旋转的 CSS 实现

要在悬停时创建旋转图像，您可以使用 CSS3 过渡和 'rotate( ）' 财产。以下CSS代码片段提供了必要的样式：

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

说明：

• 'transition'属性设置'transition'的持续时间和过渡效果变换'属性改变。在这种情况下，过渡将花费 0.7 秒，并具有“缓入缓出”效果。
• 当用户将鼠标悬停在图像上时，将应用“悬停”样式。
• 带有“rotate(360deg)”的“transform”属性可将图像旋转 360 度，从而创建旋转效果。

将样式应用到 HTML

在下面的 HTML 代码片段中，使用“img”标签嵌入图像：

<code class="html"><img src="https://i.sstatic.net/BLkKe.jpg" width="100" height="100" /></code>

通过将 CSS 代码链接到此 HTML 页面，当用户将鼠标悬停在图像上时，图像将旋转。这演示了一种向 Web 应用程序添加交互元素的简单而有效的技术。

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