水波圖是一種常用的網頁設計中圖形表現方式。通過CSS實現水波效果，可以讓網頁設計看起來更加動態、美觀。

.wave {
position: relative;
width: 100%;
height: 200px;
background: #fff;
}
.wave:before {
content: "";
position: absolute;
top: -40px;
left: 0;
width: 100%;
height: 200px;
background: #0078FF;
animation: wave 5s linear infinite;
transform-origin: center bottom;
}
@keyframes wave {
 0% {
transform: rotate(0deg);
 }
 100% {
transform: rotate(360deg);
 }
}

CSS代碼實現了一個藍色的水波圖，類名為“wave”。其基本原理是通過設置偽元素“:before”來實現水波效果，通過“animation”屬性使得水波呈現動態效果，且無限循環。

同時，通過“transform-origin”屬性將元素的基點設置為底部中心點，可以使得水波圖的波峰波谷看起來更加真實。

需要注意的是，該代碼中的“height”屬性需要根據設計需求進行設置。對于想要實現不同顏色、不同大小水波圖的設計師，可以在該基礎代碼上進行修改。