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

.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);
}
}

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

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