CSS3的旋轉動畫非常常見,常常用來制作菜單和旋轉廣告。在旋轉動畫中,勻速旋轉是非常重要的一個特性,它能讓動畫更加流暢自然。下面我們來看看如何使用CSS3來實現(xiàn)勻速旋轉。
/* 定義旋轉的關鍵幀 */ @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 應用旋轉動畫 */ div { width: 100px; height: 100px; background-color: red; animation: rotate 2s linear infinite; }
代碼中我們首先定義了一個關鍵幀,用來描述旋轉動畫的變化過程。其中0%表示動畫開始時的狀態(tài),即transform為rotate(0deg)。100%表示動畫結束時的狀態(tài),即transform為rotate(360deg)。然后我們在div元素上應用了旋轉動畫,并設置了動畫時間為2s,動畫運行方式為linear即勻速運行,以及循環(huán)執(zhí)行動畫。
以上是CSS3勻速旋轉動畫的實現(xiàn)方法。我們可以根據(jù)實際需求來調整動畫的時間、運行方式和循環(huán)次數(shù)等參數(shù),從而實現(xiàn)具有個性化特色的旋轉動畫效果。