CSS畫圓動畫效果

.circle{
width: 100px;
height: 100px;
background: #f00;
border-radius: 50%;
animation: rotate 2s linear infinite;
}
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}

上面的代碼中，通過border-radius屬性將一個div元素定義為圓形，然后通過animation屬性實現旋轉的動畫效果。

其中，animation屬性有以下幾個設置:

• animation-duration: 動畫周期的時間，單位為秒或毫秒。
• animation-timing-function: 動畫的時間函數，即動畫運行的速度變化。
• animation-delay: 動畫延遲的時間，單位為秒或毫秒。
• animation-iteration-count: 動畫循環(huán)的次數，可以是具體的數字或infinite表示無限循環(huán)。
• animation-direction: 動畫的方向，可以是normal（正常順序）、reverse（反向順序）或alternate（交替交替）。

此外，通過@keyframes定義了動畫的關鍵幀，即動畫從開始到結束的細節(jié)設置。在上面的代碼中，將一個div元素從0度旋轉到360度。

總結：使用CSS畫圓動畫效果，只需要給元素添加border-radius屬性將其定義為圓形，然后通過animation屬性設置動畫效果，再利用@keyframes定義動畫的關鍵幀。