现在许多网站都在注重设计和动态效果，其中水平线动画是常用的一种动效，可以让网站更加生动和具有视觉冲击力。下面就介绍一下如何使用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实现简单的水平线动画效果，让网站更加生动和精彩。