【开发小技巧】014—如何使用CSS为直线运动中的直线设置动画？

来源 | https://www.geeksforgeeks.org/how-to-animate-a-straight-line-in-linear-motion-using-css/

翻译 | web前端开发（ID：web_qdkf)

直线的线性运动意味着该线将从一个点开始，到达第二个点，然后再回到起点。这是一种往返运动。我们将仅使用CSS进行操作。

方法：方法是首先创建一条直线，然后使用关键帧为其设置动画。这将分两步完成。首先是前进运动，其次是后退运动。以下代码将采用相同的方法。

HTML：在HTML中，我们创建了一个div元素，用于制作一条直线。

CSS：

• 通过提供您喜欢的最小高度和宽度来创建一条直线。

• 使用before选择器对此直线进行动画处理，并为其提供线性动画，并带有名为animate的关键帧标识符。

• 关键帧的动画非常简单。对于前半帧，使宽度为100％（向前移动），然后将其减小为下半帧的0％（向后移动）。

完整代码：在本节中，我们将结合使用HTML和CSS代码来制作直线动画效果。

输出：

本文完~