水波效果是一種常見的網頁動態效果之一，它能夠為網頁增添一份生動感和立體感。CSS也可以用來實現水波效果，下面就讓我們一起來學習如何使用CSS來實現水波效果吧！

.wave {
position: relative;
width: 300px;
height: 200px;
background: #fff;
margin: 50px auto;
overflow: hidden;
}
.wave:before {
content: "";
display: block;
position: absolute;
top: -100px;
right: 0;
left: 0;
z-index: 1;
height: 200px;
background: linear-gradient(to bottom, #fff 0%, #111 50%);
border-radius: 50% / 0 0 50% 50%;
}
.wave:after {
content: "";
display: block;
position: absolute;
top: -105px;
right: 0;
left: 0;
z-index: 3;
height: 200px;
background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(17,17,17,0.2) 50%, rgba(255,255,255,0.2) 100%);
animation: wave 3s linear infinite;
border-radius: 50% / 0 0 50% 50%;
}
@keyframes wave {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}

以上是CSS代碼實現水波效果的方法。下面簡單講解一下它的原理和具體實現。

首先需要給元素設置一個相對定位，以便于后面偽元素的絕對定位。設置元素的寬度、高度、背景顏色及圓角等屬性。

然后，在元素前后各添加一個偽元素，分別用于繪制上下兩層波浪。前面的偽元素通過設置漸變背景色來實現。后面的偽元素則需要添加動畫效果，我們使用CSS3中的keyframes屬性來實現線性位移效果，不斷地讓波浪左右移動，模擬波浪的動態效果。

在這里，我們使用了border-radius屬性，將元素的左下角和右下角進行圓角處理，并且將圓角半徑分別設置為“0”和“50%”，這樣才能呈現出波浪的形狀。

最后，我們將元素的overflow設為“hidden”，這樣就能隱藏掉多余的波浪部分，只展示元素內的內容。這樣，一個簡單而又生動的水波效果就成功實現了。