| 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> 輸出：
本文完~