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