CSS 实现无限滚动（简单版本待进度条）

 <template>
  <div class="pt20 scroll-container">
    <div class="scroll-content">
      <!-- 第一组 -->
      <div v-for="value in 3" :key="value" class="scroll-item">
        <div class="scale-image h100">
          <img src="~@/assets/img/ocean/videos-3.png" alt="">
        </div>
        <div class="ico-play">
          <img src="~@/assets/img/ocean/ico-play.png" alt="">
        </div>
      </div>
      <!-- 第二组 -->
      <div v-for="value in 3" :key="`db-${value}`" class="scroll-item">
        <div class="scale-image h100">
          <img src="~@/assets/img/ocean/videos-3.png" alt="">
        </div>
        <div class="ico-play">
          <img src="~@/assets/img/ocean/ico-play.png" alt="">
        </div>
      </div>
    </div>
    <!-- 进度条 -->
    <div class="progress-container">
      <div class="progress-bar" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'ScrollCard',
  data() {
    return {
      scrollItems: 6
    }
  }
}
</script>
<style lang="less" scoped>
/* 容器样式 */
.scroll-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
/* 滚动内容 */
.scroll-content {
  display: flex;
  animation: scroll 60s linear infinite;
}
/* 悬停暂停 */
.scroll-container:hover {
  .scroll-content {
    animation-play-state: paused;
  }
  .progress-bar {
    animation-play-state: paused;
  }
}
/* 滚动项 */
.scroll-item {
  position: relative;
  flex: 0 0 auto;
  width: 646px;
  height: 365px;
  margin: 0 15px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
  .ico-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.scroll-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 进度条容器 */
.progress-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  overflow: hidden;
}
/* 进度条 */
.progress-bar {
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, #0000a2, #92a9ce);
  border-radius: 3px;
  animation: progress 60s linear infinite;
  position: relative;
  overflow: hidden;
}
/* 进度条光泽效果 */
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
  );
  animation: shine 2s infinite;
}
/* 动画定义 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-646px * 3 - 15px * 10)); /* 根据项目计算 */
  }
}
/* 进度条动画 */
@keyframes progress {
  0% {
      transform: translateX(-100%);
  }
  100% {
      transform: translateX(100vw);
  }
}
/* 光泽动画 */
@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
</style>