網頁開發中常常利用CSS來制作視覺效果，例如利用CSS小球實現往復運動的效果。下面我們來看一下具體實現方法。

.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
position: relative;
animation: move 1s linear infinite;
}
@keyframes move {
0% {
top: 0px;
left: 0px;
}
50% {
top: 200px;
left: 300px;
}
100% {
top: 0px;
left: 0px;
}
}

在上述代碼中，我們定義了一個類.ball，并設置它的寬度、高度、圓角和背景顏色。同時，我們還設置了它的位置屬性為相對定位（relative），表示該小球的位置是相對于其默認位置進行定位的。接著，我們定義了一個動畫（animation），使小球在往復運動。

下面我們來分別解釋一下該動畫的屬性值：

• animation-name：指定動畫的名稱，該值必須與@keyframes聲明中的動畫名稱相同。
• animation-duration：指定動畫的持續時間，本例中為1秒。
• animation-timing-function：指定動畫的時間曲線，默認為ease。
• animation-delay：指定動畫開始前的延時時間，默認為0。
• animation-iteration-count：指定動畫的重復次數，本例中設置了無限次重復（infinite）。
• animation-direction：指定動畫的播放方向，本例中為正常方向（normal）。
• animation-fill-mode：指定動畫完成后元素的狀態，本例中為保持最后狀態（forwards）。

接下來，我們使用@keyframes聲明定義該動畫的關鍵幀（keyframes）：

• 0%：表示動畫的初始狀態。
• 50%：表示動畫中間的狀態。
• 100%：表示動畫的結束狀態。

在每個關鍵幀中，我們分別指定了小球的top和left屬性，使其在不同的狀態下具有不同的位置。通過這樣的方式，我們就可以實現小球的往復運動效果。