在CSS中,可以使用border-radius屬性來繪制圓形??梢栽O置元素的寬高相等,同時設置border-radius為50%來繪制一個圓形。
.circle { width: 100px; height: 100px; border-radius: 50%; }
接著,可以使用transform屬性來旋轉元素。設置transform屬性的rotate值即可讓元素旋轉。
.circle { width: 100px; height: 100px; border-radius: 50%; transform: rotate(45deg); }
如果要讓圓形不停地旋轉,可以使用CSS動畫。首先定義一個關鍵幀動畫,將圓形旋轉360度。
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
然后將動畫應用到元素上,并設置動畫的時間和循環次數。
.circle { width: 100px; height: 100px; border-radius: 50%; animation: rotate 2s linear infinite; }
這樣,一個旋轉的圓形就完成了。