CSS3提供了許多炫酷的效果，其中水流動效果是比較有趣的一個。通過使用CSS3動畫和變換屬性，我們可以輕松地實現這樣的效果。

.wave {
position: relative;
width: 400px;
height: 300px;
background-color: #1abc9c;
overflow: hidden;
}
.wave:before, .wave:after {
content: "";
position: absolute;
width: 200px;
height: 200px;
background-color: #f1c40f;
bottom: -100px;
border-radius: 50%;
animation-name: wave;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.wave:before {
left: 50px;
transform-origin: 100px 100px;
animation-delay: -0.5s;
}
.wave:after {
left: 250px;
transform-origin: 100px 100px;
}
@keyframes wave {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(100px, 50px);
}
100% {
transform: translate(0, 0);
}
}

上面的代碼演示了簡單的水流動效果，首先我們創建了一個高300px、寬400px，背景為#1abc9c的波浪區域。接下來是波浪的實現，使用偽元素:before和:after，設置寬高為200px，并將它們放到波浪區域的下邊緣。接下來是關鍵的動畫部分，通過CSS3動畫和變換屬性，實現了波浪上下的移動效果。

在:before和:after上，我們還設置了不同的transform-origin屬性以使它們運動的方式看起來更加真實。

通過上面的代碼，我們可以輕松地實現水流動效果，并加以修改，以實現更多的變化。