流動線條（Flowing Lines）是一種美觀、動態(tài)的CSS效果，可以用來裝飾網(wǎng)頁。在這種效果中，線條會流動、劇烈變形而不斷變換方向，形成一種獨(dú)特的視覺體驗(yàn)。

.flow-line {
position: relative;
height: 100px;
overflow: hidden;
}
.flow-line:before {
content: "";
display: block;
position: absolute;
width: 300%;
height: 100%;
top: 0;
left: -100%;
z-index: -1;
animation: flow 10s linear infinite;
background: linear-gradient(to right, #00e0ff, #1c1b1b, #00e0ff);
}
@keyframes flow {
0% {
transform: translateX(0%);
}
50% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}

上面是一個(gè)簡單的流動線條的代碼例子。首先，我們創(chuàng)建一個(gè)相對定位的div容器，用來包裹流動線條。然后，在其:before偽元素中，設(shè)置寬度為父元素的300%、高度為100%、起始位置在左側(cè)100%處的絕對定位元素。

接下來，在該偽元素中，我們使用關(guān)鍵幀動畫（animation）來控制流動線條的變化。使用translateX函數(shù)來對偽元素進(jìn)行水平移動。使用linear漸變函數(shù)，以實(shí)現(xiàn)線條顏色的漸變效果。

最后，在HTML中聲明使用.flow-line類即可。具體樣式可以根據(jù)實(shí)際需求進(jìn)行調(diào)整。