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