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

實現無盡的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中文網其他相關文章！