CSS波浪水球是一種很酷的效果，它可以讓我們的網頁看起來更加生動、有趣。下面，我們就來一起學習如何實現CSS波浪水球的效果。

.ball {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #68C3A3;
box-shadow:
0 8px 0 0 #68C3A3,
0 16px 0 0 #68C3A3,
0 24px 0 0 #68C3A3,
0 32px 0 0 #68C3A3,
0 40px 0 0 #68C3A3,
0 48px 0 0 #68C3A3,
0 56px 0 0 #68C3A3,
0 64px 0 0 #68C3A3,
0 0 32px rgba(0,0,0,0.2);
animation: wave 1s ease-in-out infinite;
}
@keyframes wave {
0% {
transform: translateX(0) translateY(-15px);
}
50% {
transform: translateX(100px) translateY(5px);
}
100% {
transform: translateX(0) translateY(-15px);
}
}

首先，我們需要創建一個圓形的水球，可以使用border-radius來實現。然后，設置水球的寬度和高度，并添加背景顏色。這里，我們使用了#68C3A3這個顏色。

接下來，我們通過box-shadow屬性來為水球添加波浪效果。我們定義了不同距離和時間點的八個陰影效果，來模擬波浪的形狀。

最后，使用CSS動畫來實現水球波浪的動態效果。我們定義了一個名為wave的關鍵幀動畫，通過transform屬性來實現水球的移動。

這樣，一個酷炫的CSS波浪水球就完成了。你可以將這段代碼復制到你的項目中，或者進行更多的自定義設置，創造出更加獨特的效果。