如何使用 CSS 创建悬停时图像旋转或旋转效果？

使用 CSS 模拟悬停时图像旋转

要在悬停时在图像上实现所需的旋转或旋转效果，可以将 CSS 与特定属性和过渡结合使用。实现方式如下：

代码实现

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

在提供的 HTML 代码中，每个图像元素都使用上述 CSS 样式进行修改：

<code class="html"><img  src="/static/imghwm/default1.png" data-src="http://i.imgur.com/3DWAbmN.jpg" class="lazy" alt="如何使用 CSS 创建悬停时图像旋转或旋转效果？" >
<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>

说明

• Border-radius: 将图像设置为圆形（50% border-radius）。
• Transition: 定义悬停时图像变换的平滑过渡（持续时间和缓动函数）。
• 变换：旋转：悬停时，图像的变换属性设置为旋转 360 度，导致其旋转.

此 CSS 实现允许当鼠标悬停在图像上时图像围绕其中心平滑旋转。

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