CSS是網(wǎng)頁(yè)開(kāi)發(fā)中非常重要的一種語(yǔ)言，很多網(wǎng)頁(yè)都需要使用CSS來(lái)達(dá)到更好的視覺(jué)效果。其中，線條移動(dòng)動(dòng)畫(huà)效果是一種非常常見(jiàn)的效果，下面就為大家介紹一下如何制作CSS線條移動(dòng)動(dòng)畫(huà)效果。

.line {
width: 100%;
height: 2px;
background-color: black;
position: relative;
}
.line::before {
content: "";
width: 20px;
height: 2px;
background-color: red;
position: absolute;
top: 0;
left: 0;
animation: move 2s infinite;
transform-origin: left;
}
@keyframes move {
0% {
transform: scaleX(0);
}
50% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}

首先，我們需要?jiǎng)?chuàng)建一個(gè)div并設(shè)置其class為"line"，這個(gè)div就是我們的線條容器。接著，我們使用偽元素::before來(lái)為這個(gè)容器創(chuàng)建一個(gè)紅色的線條，同時(shí)設(shè)置該元素的位置為相對(duì)于其父容器（即上一個(gè)div）絕對(duì)定位，并設(shè)置其動(dòng)畫(huà)效果為"move"，持續(xù)時(shí)間為2秒，循環(huán)無(wú)限次。注意，我們將動(dòng)畫(huà)效果應(yīng)用在了偽元素上，而不是直接應(yīng)用在線條容器上。

接著，我們需要設(shè)置動(dòng)畫(huà)效果。在上述代碼中，我們使用了@keyframes來(lái)定義了一個(gè)名為"move"的動(dòng)畫(huà)效果，其中0%表示動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)，50%表示動(dòng)畫(huà)進(jìn)行到一半時(shí)的狀態(tài)，100%表示動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)。在這個(gè)動(dòng)畫(huà)效果中，我們使用了transform: scaleX()來(lái)實(shí)現(xiàn)線條橫向縮放。在0%時(shí)，我們將線條橫向縮放為0，即不可見(jiàn)狀態(tài)；到了50%時(shí)，我們將線條橫向縮放為1，即完整可見(jiàn)狀態(tài)；最后到了100%時(shí)，我們?cè)俅螌⒕€條橫向縮放為0，即不可見(jiàn)狀態(tài)。這樣，我們就成功地創(chuàng)建了一條左側(cè)為紅色，從左向右移動(dòng)到右側(cè)不可見(jiàn)的CSS線條移動(dòng)動(dòng)畫(huà)效果。