CSS3是一種優秀的前端技術，它能夠讓我們做出許多炫酷的效果，例如水面波浪效果。這種效果可以讓網頁更加有趣、生動，下面我們就來看看如何利用CSS3實現水面波浪效果。

.wave {
position: relative;
width: 100%;
height: 300px;
background-color: #1c2938;
}
.wave:before,
.wave:after {
content: '';
position: absolute;  
top: -20px;  
width: 100%;  
height: 20px;  
background: url(http://p5.qhimg.com/t0187713c077387bdc8.png) repeat-x left top;  
pointer-events: none;  
}
.wave:after {
top: auto;
bottom: 0px;  
-webkit-transform: rotate(180deg);  
-moz-transform: rotate(180deg);  
transform: rotate(180deg);  
}

首先，我們需要創建一個容器，定義其寬高和背景顏色。然后，我們利用:before和:after偽元素來實現波浪效果。

利用:before和:after偽元素，我們可以在容器上面和下面創建兩個矩形。通過background屬性設置其背景樣式，我們可以將一個圖片平鋪一遍，這樣就會形成水波的效果。

通過-pointer-events屬性，我們可以將這些偽元素設置為不響應任何事件。最后，我們需要把下面的矩形旋轉180度，這樣上下兩個波浪就緊密相連了。

通過以上幾個步驟，我們就可以在網頁上實現生動有趣的水面波浪效果了。