CSS3是一種強大的樣式語言，它可以幫助我們實現各種想象得到的效果。其中，線條的移動是一個比較流行的效果，下面我們就來了解一下如何使用CSS3來實現線條的移動。

.line {
width: 100%;
height: 3px;
background-color: #000;
position: relative;
overflow: hidden;
}
.line::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #fff;
animation: line 3s ease infinite;
}
@keyframes line {
0% {
width: 0%;
}
50% {
width: 100%;
}
100% {
width: 0%;
}
}

上面的代碼中，我們首先定義了一個class為line的樣式，它是一個寬度為100%、高度為3px的黑色線條塊，此外還設置了它的position為relative，這樣我們后面使用絕對定位元素時會很方便。另外也要給這個塊設置overflow:hidden，這樣我們后面的before偽元素才能被隱藏，避免出現出界的情況。

接著我們定義:before偽元素，在它的position為絕對位置，top和left都為0， width設置為0%。background-color為白色，這樣它才能夠充滿后面的黑色線條塊。

在這一段代碼的最后，定義了一個關鍵幀動畫line，它有3個階段：0%、50%、100%。在0%的時候，width為0；在50%時，width為100%；在100%時，width再次變為0。我們還為這個動畫設置了animation屬性，這樣線條才能夠在移動。

最后就是在使用時，我們只需要在HTML中添加一個class為line的塊即可，無需其他復雜操作。