CSS圓圈波動動畫是一種常見的網頁設計效果。這種動畫效果給用戶帶來一種悠閑、自然的感覺，讓網頁顯得更為美觀、生動。接下來，我們將介紹如何使用CSS創建圓圈波動動畫。

/*html代碼*/
/*CSS樣式*/
.circle {
width: 50px;
height: 50px;
background-color: #7ea7d8;
border-radius: 50%;
position: relative;
animation: wave 2s linear infinite;
}
/*波動動畫*/
@keyframes wave {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}

在上述代碼中，我們首先在HTML中創建了一個id為circle的div元素，然后使用CSS樣式設置該元素的樣式。

設置圓形需要使用border-radius屬性，將其設置為50%即可。接著，我們為元素添加了一個相對定位，以便在后面的波動動畫中進行位移。

波動動畫使用@keyframes關鍵字來定義。在這里，我們定義了三個關鍵幀，分別為0%、50%、100%。表示元素在動畫的不同階段的位置。我們分別給每個關鍵幀設置不同的縱向位移，通過 translateY() 函數來實現。

最后，我們在.circle樣式中使用animation屬性來為元素添加動畫。wave表示動畫的名稱，2s表示動畫時長，linear表示動畫的緩動方式，infinite表示動畫的循環次數。

這樣，我們就完成了CSS圓圈波動動畫的創建。可以根據需要，對不同元素進行這種動畫效果的設置。