CSS動畫實現轉動的方法非常簡單,下面我們就來詳細了解一下。
.spin{ animation: spin 1s linear infinite; } @keyframes spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
上述代碼中,我們定義了一個名為.spin的類,該類的動畫效果是旋轉。通過animation屬性,我們定義了動畫名稱、動畫時長、動畫速度和動畫是否無限循環。在本例中,我們定義了一個名為spin的動畫,動畫時長為1s、動畫速度為勻速、動畫無限循環。
接下來,我們定義了一個名為spin的關鍵幀動畫,通過from和to關鍵幀,我們定義了動畫過程中元素從0°轉動到360°的過程。
最后,我們將.spin類添加到HTML元素中,即可實現旋轉效果。例如:
<div class="spin"></div>
這樣,我們就實現了一個簡單的CSS動畫轉動效果。