CSS的動畫效果給網頁帶來了更加豐富多彩的視覺效果,持續旋轉是其中一種常見的動畫效果。下面介紹如何使用CSS來實現這一效果。
.rotate { animation: rotating 2s linear infinite; /*設置動畫名稱、執行時間、動畫曲線、以及動畫次數*/ } @keyframes rotating { from { transform: rotate(0deg); }/*起始狀態為0度*/ to { transform: rotate(360deg); }/*結束狀態為360度*/ }
代碼中,先設置一個類名為.rotate的元素,設定它的動畫屬性。其中,animation屬性指定了動畫名稱、執行時間、動畫曲線以及動畫次數。接著,通過@keyframes來定義動畫的具體細節,其中from指定動畫的起始狀態,to指定動畫的結束狀態。在旋轉動畫中,起始狀態為0度,結束狀態為360度。
在實際應用中,將.rotate類名添加到需要實現持續旋轉效果的元素中即可實現該效果。
上一篇css動畫心形效果代碼
下一篇css動畫平滑移動