如何使用 CSS 創建懸停激活的圖像旋轉？

懸停啟動的圖像旋轉

將動態行為合併到您的網頁中，例如懸停時的圖像旋轉，可以增強用戶參與度。若要在有圓形邊框的圖片上使用CSS 達到此效果，請依照下列步驟操作：

1. CSS3 轉場與旋轉（）

利用CSS3過渡在懸停時平滑地旋轉影像。過渡屬性定義動畫的持續時間和緩動函數。在本例中，我們將過渡持續時間設定為 0.7 秒，並指定緩入緩出緩動函數。

<code class="css">img {
  transition: transform .7s ease-in-out;
}</code>

2.懸停變換

要在懸停時旋轉圖像，我們使用transform屬性和rotate()函數來設定所需的旋轉角度。在此範例中，我們將影像旋轉 360 度。

<code class="css">img:hover {
  transform: rotate(360deg);
}</code>

3. HTML 實作

在 HTML 程式碼中，放置具有適當來源和大小的圖片元素。

<code class="html"><img  src="/static/imghwm/default1.png" data-src="path/to/image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="如何使用 CSS 創建懸停激活的圖像旋轉？" ></code>

範例程式碼

這是示範旋轉影像效果的完整程式碼範例：

<code class="css">img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}</code>

<code class="html"><img  src="/static/imghwm/default1.png" data-src="path/to/image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="如何使用 CSS 創建懸停激活的圖像旋轉？" ></code>

使用此程式碼，每當使用者將滑鼠懸停在圖像上時，它將平滑地旋轉360 度。

以上是如何使用 CSS 創建懸停激活的圖像旋轉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！