如何用CSS将直线转为点阵，随高度/滚动动态生成圆点？

当前与期望效果 #

• 当前效果：一个垂直的红色实心长条
• 期望效果：一列垂直排列的红色圆点，元素高度越高圆点数量越多；页面滚动时，圆点会随着滚动逐个显现

当前代码 #

HTML #

<div class="item_dot --straight"></div>

CSS #

.item_dot {
  background: red;
  width: 10px;
  height: 100%;
}

解决方案 #

下面是纯CSS的实现方案，满足高度自适应圆点数量+滚动渐显的需求：

完整代码 #

HTML

<!-- 滚动容器，提供滚动触发条件 -->
<div class="scroll-wrap">
  <div class="item_dot"></div>
</div>

CSS

/* 滚动容器：设置视口高度，开启垂直滚动 */
.scroll-wrap {
  height: 100vh;
  overflow-y: auto;
  /* 定义滚动时间线，用于绑定动画 */
  scroll-timeline: --dotScroll block;
}

.item_dot {
  width: 10px;
  /* 示例高度，可根据需求调整，高度越高圆点越多 */
  height: 800px;
  /* 用径向渐变绘制单个圆点，设置垂直重复 */
  background-image: radial-gradient(circle, red 6px, transparent 6px);
  /* 控制圆点大小和垂直间距：第一个值是宽度，第二个是上下间距 */
  background-size: 100% 20px;
  background-repeat: repeat-y;
  /* 初始遮罩隐藏所有圆点 */
  mask-image: linear-gradient(to bottom, transparent 0%, black 0%);
  /* 绑定滚动时间线的动画 */
  animation: revealDots linear;
  animation-timeline: --dotScroll;
  /* 动画进度完全匹配滚动范围 */
  animation-range: 0 100%;
}

/* 滚动时逐步显示圆点的动画 */
@keyframes revealDots {
  from {
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 0%, black 0%, black 0%);
  }
  to {
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 0%, black 0%, black 100%);
  }
}

/* 可选：给滚动容器加占位内容，方便测试滚动效果 */
.scroll-wrap::before {
  content: "";
  display: block;
  height: 1500px;
}

关键实现点 #

• 自适应圆点数量：通过background-repeat: repeat-y让径向渐变的圆点垂直重复排列，只要调整.item_dot的高度，圆点数量会自动跟着变，间距由background-size的第二个参数控制。
• 滚动渐显：利用CSS滚动驱动动画（scroll-timeline），把容器的滚动进度和元素的遮罩动画绑定，滚动时遮罩逐步向下覆盖显示区域，实现圆点逐个显现的效果。
• 兼容性：滚动驱动动画目前在Chrome/Edge 115+版本原生支持，Firefox需要开启layout.css.scroll-timeline.enabled实验特性才能使用。

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