2025-03-06 CSS 实现虚线滚动效果的示例代码

<!DOCTYPE html>
<html>
<head>
<style>
.dashed-scroll {
  width: 300px;
  height: 4px;
  margin: 50px auto;
  background: 
    repeating-linear-gradient(
      to right,
      #000 0%,
      #000 50%,
      transparent 50%,
      transparent 100%
    );
  background-size: 30px 100%;
  animation: scroll 1s linear infinite;
}

@keyframes scroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 30px 0;
  }
}

/* 其他方向示例 */
.vertical-scroll {
  width: 4px;
  height: 200px;
  background: 
    repeating-linear-gradient(
      to bottom,
      #000 0%,
      #000 50%,
      transparent 50%,
      transparent 100%
    );
  background-size: 100% 30px;
  animation: scroll-vertical 1s linear infinite;
}

@keyframes scroll-vertical {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 30px;
  }
}
</style>
</head>
<body>
  <!-- 水平滚动 -->
  <div class="dashed-scroll"></div>
  
  <!-- 垂直滚动 -->
  <div class="vertical-scroll"></div>
</body>
</html>

实现原理：

使用 repeating-linear-gradient 创建重复的虚线图案

通过 background-size 控制虚线段的重复间距

使用 CSS 动画改变 background-position 实现滚动效果

关键点说明：

水平滚动：渐变方向为 to right，动画改变 X 轴位置

垂直滚动：渐变方向为 to bottom，动画改变 Y 轴位置

通过调整 background-size 的值可以改变虚线的间隔长度

修改颜色值（#000）可以改变虚线的颜色

调整动画时长（1s）可以改变滚动速度

2025-03-06 CSS 实现虚线滚动效果的示例代码

推荐阅读更多精彩内容