CSS3是現代網頁開發中不可或缺的一部分，它提供了豐富的樣式效果以及動畫效果，今天我們來學習如何用CSS3制作圓形水波效果。

首先，我們要準備一個圓形水波的div元素，代碼如下：

<div class="circle">
<div class="wave"></div>
</div>

接下來我們需要用CSS來制作水波效果。

首先，我們需要為圓形水波div元素設置一些基礎樣式：

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #58B9C5;
position: relative;
overflow: hidden;
}

上面的代碼中，我們設置了圓形水波div元素的寬高都為200px，邊框半徑為50%以呈現圓形效果。我們給圓形水波div元素設置了背景顏色和定位方式。注意了，我們還將其overflow屬性設置為hidden以后面實現水波效果做準備。

現在我們開始制作水波效果。這里我們需要用到Pseudo元素（偽元素）來實現。代碼如下：

.circle .wave {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #58B9C5, #fff);
opacity: 0.5;
animation: wave 2s infinite linear;
}
.circle .wave:after {
content: "";
display: block;
position: absolute;
top: -100%;
left: 0;
right: 0;
background: linear-gradient(to bottom, transparent, #fff);
opacity: 0.5;
animation: wave 2s infinite linear;
}
@keyframes wave {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, -50%);
}
}

上面的代碼中，我們為.circle元素中的.wave元素設置了基礎樣式，使其覆蓋整個圓形水波div元素，并在底部對齊。我們使用了線性漸變來為水波定義顏色，用opacity屬性來調整波的透明度。我們還使用了CSS動畫來實現波的無限循環。接著，我們借助Pseudo元素:after來創建第二個水波，這個波的顏色和形狀和第一個波完全相同，只是其定位在第一個波的上方，高度為負值，用以補充上面的部分，呈現出完整的水波效果。

最后，我們用CSS關鍵幀動畫transform: translate()屬性使波動起來。

這樣就完成了一個圓形水波效果的制作，效果類似于一個水池中蕩漾的波紋。