如何為圖示創建無盡的 CSS 旋轉動畫？-css教學-PHP中文網

如何為圖示創建無盡的 CSS 旋轉動畫？

Barbara Streisand

發布： 2024-11-05 21:53:02

原創

228 人瀏覽過

How do I create an endless CSS rotation animation for an icon?

無盡的CSS旋轉動畫：如何連續旋轉圖示

使用CSS實現圖示的無限旋轉，CSS動畫的組合並且需要關鍵幀。以下步驟概述了解決方案：

1.添加關鍵幀：

我們定義兩個關鍵幀，一個用於旋轉的開始（0 度），一個用於結束（360 度）。這確保了平穩過渡。

<code class="css">@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}</code>

登入後複製

2.應用動畫：

我們使用 CSS 動畫屬性將創建的關鍵影格動畫套用到要旋轉的元素。此屬性需要三個參數：關鍵影格名稱、持續時間和循環行為（無限）。

<code class="html"><div class="rotating">
  Rotate
</div></code>

登入後複製

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

登入後複製

3.修正瀏覽器相容性問題：

為了確保不同瀏覽器之間的相容性，我們包含基於WebKit 的瀏覽器（Chrome、Safari）的供應商前綴和其他瀏覽器的標準屬性。

<code class="css">.rotating {
  -webkit-animation: rotating 2s linear infinite; /* Safari and Chrome */
  -moz-animation: rotating 2s linear infinite;    /* Firefox */
  -ms-animation: rotating 2s linear infinite;     /* IE */
  animation: rotating 2s linear infinite;         /* Standard */
}</code>

登入後複製

遵循這些步驟，您可以輕鬆地使用 CSS 為圖示和其他元素建立無盡的旋轉動畫。

以上是如何為圖示創建無盡的 CSS 旋轉動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！