CSS坐水管流動效果是一種比較酷炫的頁面動畫效果，可以為網站增添一份活力和生動性。下面是實現該效果的CSS代碼：

.pipe {
width: 300px;
height: 20px;
background-color: #c5c5c5;
border-radius: 10px;
position: relative;
}
.pipe:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
top: -10px;
left: 0;
animation: updown 1s linear infinite;
}
.pipe:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
bottom: -10px;
left: 0;
animation: updown 1s 0.5s linear infinite;
}
@keyframes updown {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 20px);
}
}

首先，我們定義一個容器元素pipe，設置其寬度、高度和背景顏色，并利用border-radius屬性將其四個角設置為圓弧形狀。使用position: relative屬性讓其子元素的絕對定位相對于該元素進行。

然后，我們通過:before和:after偽元素在容器的頂部和底部分別添加了一個白色小球。設置其position為absolute，使其脫離文檔流并能與容器進行相對定位。利用width、height和border-radius屬性將其設置為圓形，通過top和bottom來讓它們分別位于容器的頂部和底部。

接下來，使用CSS3的animation屬性來實現動畫效果，讓小球不斷地沿著容器的豎直方向上升和下落。updown是動畫名稱，1s是動畫時長，linear是動畫速度，infinite是動畫循環次數。

最后，在@keyframes中定義動畫的具體效果。將小球從上到下進行平移是通過每次前進的距離實現的。50%的時候，小球到達底部，再次將其移動到容器的頂部。