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