| https://www.geeksforgeeks.org/how-to-animate-a-straight-line-in-linear-motion-using-css/
翻译 | web前端开发（ID：web_qdkf)
直线的线性运动意味着该线将从一个点开始，到达第二个点，然后再回到起点。这是一种往返运动。我们将仅使用CSS进行操作。
方法：方法是首先创建一条直线，然后使用关键帧为其设置动画。这将分两步完成。首先是前进运动，其次是后退运动。以下代码将采用相同的方法。
HTML：在HTML中，我们创建了一个div元素，用于制作一条直线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>GeeksforGeeks</title>
</head>
<body>
<div class="geeks"></div>
</body>
</html> CSS：
- 通过提供您喜欢的最小高度和宽度来创建一条直线。
- 使用before选择器对此直线进行动画处理，并为其提供线性动画，并带有名为animate的关键帧标识符。
- 关键帧的动画非常简单。对于前半帧，使宽度为100％（向前移动），然后将其减小为下半帧的0％（向后移动）。
<style>
body {
margin: 0;
padding: 0;
background: green;
}
.geeks {
width: 400px;
height: 2px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.geeks::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: green;
animation: animate 5s linear infinite;
}
@keyframes animate {
0% {
left: 0;
}
50% {
left: 100%;
}
0% {
left: 0;
}
}
</style> 完整代码：在本节中，我们将结合使用HTML和CSS代码来制作直线动画效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
How to animate a straight
line in linear motion?
</title>
<style>
body {
margin: 0;
padding: 0;
background: green;
}
.geeks {
width: 400px;
height: 2px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.geeks::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: green;
animation: animate 5s linear infinite;
}
@keyframes animate {
0% {
left: 0;
}
50% {
left: 100%;
}
0% {
left: 0;
}
}
</style>
</head>
<body>
<div class="geeks"></div>
</body>
</html> 输出：
本文完~