首頁 > web前端 > css教學 > 主體

如何使用 CSS 創建懸停動畫旋轉或旋轉圖像?

Patricia Arquette
發布: 2024-11-04 14:48:01
原創
713 人瀏覽過

How to Create a Hover-Animated Spinning or Rotating Image with 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="https://i.sstatic.net/BLkKe.jpg" width="100" height="100"/></code>
登入後複製

透過組合這些 CSS 和 HTML 元素,您可以有效地建立懸停動畫旋轉或旋轉圖像。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板