使用css实现车道线运动效果

可以使用CSS动画和伪元素来创建车道线运动效果。以下是一个简单的示例：

HTML代码：

<div class="road">
  <div class="lane"></div>
  <div class="lane"></div>
  <div class="lane"></div>
</div>

CSS代码：

.road {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #333;
}

.lane {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100px;
  background-color: #fff;
  transform: translateX(-50%);
}

.lane:nth-child(1) {
  top: 100px;
  animation: move1 2s linear infinite;
}

.lane:nth-child(2) {
  top: 250px;
  animation: move2 2s linear infinite;
}

.lane:nth-child(3) {
  top: 400px;
  animation: move3 2s linear infinite;
}

@keyframes move1 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-50%) translateY(150px);
  }
}

@keyframes move2 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-50%) translateY(150px);
  }
}

@keyframes move3 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-50%) translateY(150px);
  }
}

解释：

- `position: relative;` 属性将`.road`元素设置为相对定位，以便子元素 `.lane` 可以使用绝对定位。
- `width: 100%;` 和 `height: 100vh;` 属性将`.road`元素的宽度设置为100%和高度设置为屏幕高度，使其占满整个屏幕。
- `background-color: #333;` 属性设置`.road`元素的背景颜色为黑色。
- `.lane`元素使用绝对定位，通过`left: 50%;`和`transform: translateX(-50%);`属性将其水平居中。
- `.lane:nth-child(1)`，`.lane:nth-child(2)` 和 `.lane:nth-child(3)` 分别为三条车道线，使用`top`属性将其垂直间隔开。
- `animation` 属性为每条车道线定义了一个运动效果，并且设置为无限循环播放。
- `@keyframes` 定义了每条车道线的动画效果，通过 `transform: translateY()` 属性将其沿着垂直方向移动。

这样，您就可以创建一个简单的车道线运动效果。您可以根据需要调整车道线的数量、颜色和动画的持续时间。