CSS3是當前前端開發(fā)中不可或缺的一部分，通過它我們可以實現(xiàn)各種精美的動畫效果，今天我們來學習一下CSS3圓形動畫效果。

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
position: relative;
animation-name: rotate;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

上面的代碼實現(xiàn)了一個紅色的圓形，同時添加了一個旋轉(zhuǎn)的動畫效果，在瀏覽器中運行可以看到它不斷地旋轉(zhuǎn)，直到我們停止動畫。

首先給圓形設置了寬高和50%的圓角邊框半徑，然后在關鍵幀中定義了初始狀態(tài)（0度）和最終狀態(tài)（360度），通過animation屬性指定了動畫名稱、持續(xù)時間、時間函數(shù)和迭代次數(shù)。

如果你想改變圓形的顏色，只需要修改background-color屬性的值即可，也可以嘗試修改動畫的持續(xù)時間、時間函數(shù)和迭代次數(shù)，看看會產(chǎn)生怎樣的效果。

總之，使用CSS3可以輕松實現(xiàn)圓形動畫效果，讓網(wǎng)頁更加生動有趣。