如何使用 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中文網其他相關文章！