在網頁開發中，我們常常會使用CSS來美化頁面元素，包括文字、圖片、按鈕等等。另外，CSS也可以制作一些小動畫效果，比如彈跳球。

.ball {
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
position: relative;
animation: bounce 1s infinite;
}
@keyframes bounce {
0% {
top: 0px;
}
50% {
top: 200px;
transform: scale(1.2);
}
100% {
top: 0px;
}
}

要制作一個彈跳球，我們需要先創建一個div，然后給它設置一些樣式屬性，比如寬度、高度、背景顏色等等。可以使用border-radius屬性將div的邊界設置為一個圓形，以讓它更像一個真正的彈跳球。

接下來，我們需要將這個球的位置設置為相對定位（position: relative），這樣才能在后續的動畫中改變它的位置。然后，我們使用animation屬性并指定一個名稱，這里我們將它命名為“bounce”，并設置它的時長為1秒，循環次數為無限次也就是說球會一直彈跳下去。

現在，我們來看一下上述代碼中的bounce動畫。它由三個關鍵幀組成，分別在0%、50%和100%的時間點上定義球的位置。在第一個關鍵幀中，球的初始位置是0px，也就是在屏幕頂端。接著，在50%的時間點，球的位置被移動到200px的高度，同時球的大小也會被放大（通過transform屬性的scale方法實現）。最后，在100%的時間點上，球回到了它的起始位置。

通過以上的CSS樣式和動畫定義，我們就成功地制作了一個彈跳球的效果。將它放到網頁中，就可以讓頁面更加生動有趣了！