首頁 >web前端 >css教學 >如何創造無盡的 CSS 旋轉動畫?

如何創造無盡的 CSS 旋轉動畫?

DDD
DDD原創
2024-11-06 13:12:02761瀏覽

How to Create an Endless CSS Rotation Animation?

實現無盡的CSS旋轉動畫

問題:

渴望使用CSS連續旋轉加載圖標,提供的程式碼無法連續旋轉產生所需的動畫。如何使用 CSS 有效地完成這種旋轉?

解決方案:

要使用CSS 實現無限旋轉,請採用以下步驟:

  1. :

      以@keyframes 表示法定義旋轉關鍵影格。
    • 設定旋轉變換的起始和結束狀態。
  2. 將動畫套用到目標元素:

      在 CSS 中建立一個旋轉類別。
    • 應用動畫使用動畫名稱、動畫持續時間和動畫迭代計數到所需的元素。
  3. 包含供應商前綴:

      添加-webkit-、-moz- 等前綴以實現跨瀏覽器瀏覽器相容性.

示例代碼:

<code class="css">@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>

Html:

<code class="html"><div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div></code>
此修改後的程式碼確保了元素的連續旋轉和無限迭代,解決了先前嘗試面臨的問題。

以上是如何創造無盡的 CSS 旋轉動畫?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn