CSS3中有很多有趣的效果，其中之一是直線流光。

直線流光可以讓文本或其他元素在水平或垂直方向上產生一條流光效果，給人一種非常炫酷的感覺。

/* 水平方向的直線流光 */
div {
background: linear-gradient(to right, #fff, #f00, #fff);
background-size: 200% 100%;
animation: flow 2s linear infinite;
}
/* 垂直方向的直線流光 */
div {
background: linear-gradient(to bottom, #fff, #f00, #fff);
background-size: 100% 200%;
animation: flow 2s linear infinite;
}
@keyframes flow {
from {
background-position: 0 0;
}
to {
background-position: -100% 0;
}
}

上述代碼中，我們使用了線性漸變來定義直線流光的顏色，可以自己設置起止顏色和中間的過渡顏色，讓流光更加豐富多彩。

為了產生流光的效果，我們通過改變元素背景的位置來實現，使用animation來不斷改變背景位置的動畫效果。

直線流光通常被用在比較炫酷的UI設計中，可以讓設計效果更加突出而醒目。