如何仅用CSS和HTML实现垂直线沿水平线无限移动的动画？

需求是实现垂直线沿水平线无限移动，且带有纵深远去的效果（线条向中心移动时间距逐渐缩小），效果如下：

目前已实现基础移动动画，但线条间距始终一致，没有纵深感，现有代码如下：

现有CSS代码 #

.animation-container {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.animation-container.left {
  left: 0;
  width: 50%;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 2px, transparent 2px);
  background-size: 58px 100%;
  clip-path: polygon(0 0, 100% 30%, 100% 70%, 0% 100%);
  animation: moveLeftToCenter 20s linear infinite;
}

.animation-container.right {
  right: 0;
  width: 50%;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.5) 2px, transparent 2px);
  background-size: 58px 100%;
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
  animation: moveRightToCenter 20s linear infinite;
}

现有HTML代码 #

<div class='animation-container left' />
<div class='animation-container right' />

实现带纵深效果的方案 #

核心思路是让线条间距从容器边缘向中心逐渐缩小，模拟透视效果，同时通过背景位置动画实现无限移动。以下是完整实现代码：

CSS代码 #

body {
  margin: 0;
  background: #1a1a1a; /* 深色背景凸显线条效果 */
  overflow: hidden;
}

.animation-container {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.animation-container.left {
  left: 0;
  width: 50%;
  /* 多层渐变模拟间距逐渐缩小的垂直线 */
  background-image: 
    linear-gradient(to right, rgba(255,255,255,0.5) 2px, transparent 2px),
    linear-gradient(to right, rgba(255,255,255,0.5) 2px, transparent 2px),
    linear-gradient(to right, rgba(255,255,255,0.5) 2px, transparent 2px),
    linear-gradient(to right, rgba(255,255,255,0.5) 2px, transparent 2px),
    linear-gradient(to right, rgba(255,255,255,0.5) 2px, transparent 2px);
  /* 每层渐变设置不同大小，实现间距从左到右缩小 */
  background-size: 
    80px 100%, 
    65px 100%, 
    50px 100%, 
    35px 100%, 
    20px 100%;
  background-position: 
    0 0, 
    80px 0, 
    145px 0, 
    195px 0, 
    230px 0;
  clip-path: polygon(0 0, 100% 30%, 100% 70%, 0% 100%);
  animation: moveLeft 20s linear infinite;
}

.animation-container.right {
  right: 0;
  width: 50%;
  background-image: 
    linear-gradient(to left, rgba(255,255,255,0.5) 2px, transparent 2px),
    linear-gradient(to left, rgba(255,255,255,0.5) 2px, transparent 2px),
    linear-gradient(to left, rgba(255,255,255,0.5) 2px, transparent 2px),
    linear-gradient(to left, rgba(255,255,255,0.5) 2px, transparent 2px),
    linear-gradient(to left, rgba(255,255,255,0.5) 2px, transparent 2px);
  background-size: 
    80px 100%, 
    65px 100%, 
    50px 100%, 
    35px 100%, 
    20px 100%;
  background-position: 
    0 0, 
    80px 0, 
    145px 0, 
    195px 0, 
    230px 0;
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
  animation: moveRight 20s linear infinite;
}

/* 左侧线条向中心移动的动画 */
@keyframes moveLeft {
  100% {
    background-position: 
      400px 0, 
      480px 0, 
      545px 0, 
      595px 0, 
      630px 0;
  }
}

/* 右侧线条向中心移动的动画 */
@keyframes moveRight {
  100% {
    background-position: 
      -400px 0, 
      -480px 0, 
      -545px 0, 
      -595px 0, 
      -630px 0;
  }
}

HTML代码 #

<div class="animation-container left"></div>
<div class="animation-container right"></div>

实现说明 #

1. 渐变间距控制：通过多层线性渐变，每层设置不同的background-size，让线条间距从容器边缘到中心逐步缩小，模拟透视纵深感。
2. 背景位置动画：通过background-position的线性变化，让多层背景整体向中心移动，实现线条无限流动的效果。
3. 保持裁剪区域：沿用原有的clip-path设置，让线条仅显示在指定的梯形区域内，符合需求的视觉范围。

内容的提问来源于stack exchange，提问作者Ivan Holiak