CSS 水波動畫是一種常見的網頁特效，可以讓頁面更加生動有趣。本文將介紹如何使用 CSS 來實現一個簡單的水波動畫。

/* 定義水波元素的基礎樣式 */
.water {
position: relative;
width: 300px;
height: 200px;
background: #6CCEE2;
overflow: hidden;
}
/* 定義水波動畫 keyframes */
@keyframes water-wave {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, 10px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
/* 定義水波類 wave */
.wave {
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
animation: water-wave 2s linear infinite;
bottom: -25%;
left: 0;
}

以上代碼中，先定義了一個名為 water 的元素，使其具有相對定位、固定寬高等基礎樣式。接著使用 @keyframes 關鍵字定義了名為 water-wave 的動畫。在動畫過程中，元素會根據時間軸逐漸改變位置，最終形成水波的效果。最后，在元素的偽類 .wave 中使用了定義的動畫，使得水波效果得以呈現出來。

通過以上代碼，您可以輕松實現一個簡單的水波動畫，并將其運用于網頁設計中。當然，水波動畫的變化形式還有很多，您可以根據需要自行調整樣式和動畫，使水波效果更加符合網頁設計風格和需要。