CSS 圓形轉動是一種常用的動畫效果,在實現過程中需要使用到 CSS3 中的動畫屬性。下面就來介紹一下如何通過 CSS 實現圓形轉動效果。
.css { width: 100px; height: 100px; border-radius: 50%; position: relative; animation: rotate 2s linear infinite; } @keyframes rotate { from {transform: rotate(0);} to {transform: rotate(360deg);} }
上面的代碼首先定義了一個 class 為 .css 的樣式,該樣式實現了一個 100x100 的圓形區域,并設置了圓形邊框的半徑為 50%(即半徑等于寬度、高度的一半)。同時,這個樣式設置了動畫屬性 animation,指定了該元素應用動畫效果,動畫名稱為 rotate。
接著,我們通過 @keyframes 規則定義了一個名為 rotate 的動畫。這個動畫從 rotate(0) 開始,到 rotate(360deg) 結束,即元素會不停地繞中心點旋轉,實現了圓形轉動的效果。
以上就是 CSS 實現圓形轉動效果的方法。有了這個簡單的樣式,我們可以在相應的元素上應用該樣式,就能展現出優美的圓形轉動效果了。