問題:
渴望使用CSS連續旋轉加載圖標,提供的程式碼無法連續旋轉產生所需的動畫。如何使用 CSS 有效地完成這種旋轉?
解決方案:
要使用CSS 實現無限旋轉,請採用以下步驟:
:
將動畫套用到目標元素:
包含供應商前綴:
示例代碼:
<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中文網其他相關文章!