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

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

Barbara Streisand
Barbara Streisand原創
2024-11-05 21:53:02207瀏覽

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中文網其他相關文章!

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