css一条线上点来回动

CSS是Web开发中不可或缺的一部分。它有许多强大的功能，其中之一就是可以通过CSS动画来创建各种各样的动态效果。

一条线上点来回动是一个常见的CSS动画，这种动画通常使用伪元素和transform属性来实现。下面是实现这个动画的示例代码：

.line {
  width: 200px;
  height: 1px;
  background-color: #000;
  position: relative; // 设置相对定位
}

.line::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000;
  position: absolute; // 设置绝对定位
  top: -10px; // 默认在线的左侧
  left: 0;
  transform: translateX(0); // 初始位置
  animation: move 2s infinite; // 播放动画
}

@keyframes move {
  50% {
    transform: translateX(180px); // 右侧
  }
  100% {
    transform: translateX(0); // 左侧
  }
} 

在上面的代码中，我们定义了一个代表线的元素，使用相对定位来改变伪元素的位置。伪元素本身使用绝对定位，并设置初始位置为线的左侧。接下来使用CSS动画（即keyframes）来定义点的移动路径。在动画的50％处，点位于线的右侧。在100％处，点返回到线的左侧。

以上就是通过CSS实现一条线上点来回动的方法。通过使用相对定位、绝对定位和CSS动画，我们可以轻松地创建各种各样的动态效果。