CSS3圓形波動圖是一種比較常見的CSS3動畫效果，它可以通過CSS3的一些特定屬性和選擇器來實現。本文將為大家介紹如何在網頁中添加這種效果。

首先，我們需要在HTML文檔中添加一個圓形波動圖的容器，例如：

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

由于我們要實現的是圓形波動圖，所以我們需要將這個div盒子的寬高設置成相等，并且它的圓角要設置為50%，如下面這樣：

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
}

接下來，我們需要添加CSS3動畫，讓圓形波動起來。我們可以利用CSS3中的@keyframes規則來實現。下面是動畫代碼：

@keyframes circleWave {
0% {
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(63, 169, 245, 0.8);
}
50% {
transform: scale(1.1);
box-shadow: 0 0 0 15px rgba(63, 169, 245, 0.1);
}
100% {
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(63, 169, 245, 0.8);
}
}

在上面的代碼中，我們定義了一個名為circleWave的動畫，并設置了3個關鍵幀，分別為0%、50%和100%。在每個關鍵幀中，我們都對圓形的大小和陰影進行了不同的設置，從而實現了“波浪”效果。

最后，我們只需要將動畫效果應用到我們的容器上，代碼如下：

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
animation: circleWave 1.5s linear infinite;
}

在上面的代碼中，我們將名為circleWave的動畫應用到了.circle容器上，同時設置動畫的時間為1.5秒，動畫的速度為線性，并且永遠循環播放。

到這里，我們的圓形波動圖就已經完成了。如果你想要了解更多的CSS3動畫效果，可以參考一些相關的文檔和教程。