CSS可以實現很多有趣的動畫，今天我們來學習一下如何用CSS畫一個動圓。

.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
position: relative;
animation: circle 2s ease-in-out infinite;
}
@keyframes circle {
0% { left: 0; top: 0; }
50% { left: 50%; top: 100%; }
100% { left: 100%; top: 0; }
}

首先，我們需要創建一個圓形的DOM元素，這可以通過設置元素的border-radius屬性為50%來實現。我們還需要設置元素的背景顏色為#f00，也就是紅色。

接下來，我們給這個元素添加一個位置屬性position，并將其值設置為relative，讓元素可以參考自己的位置進行運動。

最后，我們通過CSS3的animation屬性來設置動畫效果。我們將動畫名稱設置為circle，并設置它的持續時間為2秒，緩動函數為ease-in-out，重復播放無限次。

在@keyframes規則中，我們定義了三個關鍵幀。當動畫播放到0%時，圓的位置在左上角；當動畫播放到50%時圓的位置在屏幕正中間的下方；當動畫播放到100%時圓的位置在右上角。這樣就可以實現圓形的動畫效果了。

以上就是用CSS畫一個動圓的全部代碼和教程，希望對大家學習CSS動畫有所幫助。