CSS3是一種強大的網頁設計語言，它允許我們創建各種各樣的動畫效果，包括水波動畫效果。水波動畫效果可以使網頁看起來更加生動和有趣，下面我們來學習如何使用CSS3來創建一個水波動畫效果。

/* HTML結構 */
/* CSS樣式 */
.water {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: radial-gradient(circle, #005aff 0%, #003466 100%);
position: relative;
}
.water:before,
.water:after {
content: "";
position: absolute;
background: rgba(255, 255, 255, 0.4);
z-index: -1;
border-radius: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation: wave 1s infinite linear;
}
.water:after {
animation-delay: 0.5s;
}
@keyframes wave {
0% {
transform: scale(1, 0.6);
}
50% {
transform: scale(0.6, 1);
}
100% {
transform: scale(1, 0.6);
}
}

上面的代碼中，我們首先創建了一個圓形的水波div，然后使用CSS3中的radial-gradient屬性來創建一個徑向漸變的背景色。接著，我們使用:before和:after來創建兩個白色半透明的水波，通過transform屬性的scale函數來實現上下波動的效果。

最后，通過添加animation屬性來將動畫效果應用到水波div中，其中wave為動畫名稱，1s為動畫持續時間，infinite為動畫次數，linear為動畫速度，delay屬性則用于設置延遲時間，使得兩個水波可以錯落一起波動。

這就是一個簡單的CSS3水波動畫效果的實現方法，希望對大家有所幫助！