現在許多網站都在注重設計和動態效果，其中水平線動畫是常用的一種動效，可以讓網站更加生動和具有視覺沖擊力。下面就介紹一下如何使用CSS實現水平線動畫。

/* 定義水平線 */
hr {
border: none;
height: 2px;
background-color: black;
margin: 0;
position: relative;
}
/* 定義動畫 */
hr::before {
content: "";
height: 2px;
background-color: red;
position: absolute;
left: 0;
top: 0;
animation: line 2s linear infinite;
}
/* 定義動畫關鍵幀 */
@keyframes line {
0% { width: 0; }
100% { width: 100%; }
}

首先，我們定義了一條水平線，通過設置height和background-color來表示線的高度和顏色。將border設置為none是為了去除默認的邊框。

接下來，我們使用偽元素::before來為水平線增加動畫效果。通過設置content為空來顯示偽元素，在相對定位的hr元素的左上角設置絕對定位，使偽元素位于水平線的起點位置。

然后，我們在偽元素里使用animation屬性來定義動畫。line為動畫名稱，2s為動畫時間，linear為動畫速度，infinite為動畫循環次數。

最后，我們定義了動畫的關鍵幀。在0%時，將偽元素的寬度設置為0，表示動畫開始時偽元素并不可見；在100%時，將偽元素的寬度設置為100%，表示動畫結束時偽元素已經完全覆蓋整條水平線，達到了動畫的效果。

如此一來，我們便可以通過CSS實現簡單的水平線動畫效果，讓網站更加生動和精彩。