流動(dòng)的線條是CSS中經(jīng)常被使用的一種效果，它可以為網(wǎng)頁增添不同的氛圍和美感。利用CSS的動(dòng)畫屬性，我們可以輕松地實(shí)現(xiàn)線條在頁面中的流動(dòng)效果。

.line {
width: 100%;
height: 2px;
background-color: #000;
position: relative;
}
.line::before {
content: "";
width: 50%;
height: inherit;
position: absolute;
left: -50%;
background-color: #fff;
animation: flow 2s ease-in-out infinite;
}
@keyframes flow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}

以上代碼中，我們使用了一個(gè)偽元素::before，它的作用是作為流動(dòng)的線條。設(shè)置它的寬度為50%，左偏移為-50%，表示它的寬度是父元素的一半，并處于父元素的左側(cè)。接著，我們使用CSS3中的transform: translateX()屬性使它的位置在2秒鐘內(nèi)由左側(cè)移動(dòng)到右側(cè)，達(dá)到流動(dòng)的效果。最后，將動(dòng)畫設(shè)置為無限循環(huán)進(jìn)行即可。

使用這種方式可以實(shí)現(xiàn)流動(dòng)的線條，也可以通過使用其他屬性、組合而得到更加絢麗多彩的效果。正是由于CSS的強(qiáng)大，我們可以讓頁面變得更加生動(dòng)多彩。