纯CSS实现滚动时动态时间轴线条颜色填充效果

本文详细介绍了如何利用CSS的position: sticky属性，纯CSS实现一种动态时间轴效果。该效果特点是，在页面滚动时，一条静态的灰色时间轴基线会逐渐被一条活动颜色的线条从下往上填充，无需复杂的JavaScript，即可创建视觉吸引力强的交互式时间轴。

1. 概述与核心原理

在网页设计中，时间轴（Timeline）效果常用于展示事件序列或项目进度。一种常见的动态效果是，当用户滚动页面时，时间轴的线条会从底部向上逐渐改变颜色，指示当前滚动到的位置。传统上，这类效果可能需要JavaScript来监听滚动事件并动态修改CSS属性。然而，通过巧妙地结合CSS的position: sticky、overflow: clip和绝对定位，我们可以实现一个纯CSS的解决方案。

该方案的核心思想是：

1. 基线（Baseline）：创建一条固定颜色的静态线条作为时间轴的背景。
2. 活动线（Active Line）：创建另一条颜色不同的线条，初始时大部分隐藏在其父容器的上方，只有一小部分可见。
3. position: sticky：将包含活动线的父容器设置为粘性定位。当页面滚动到该容器时，它会固定在视口顶部。
4. overflow: clip：在时间轴的外部容器上使用此属性，以裁剪超出其边界的内容。
5. 滚动填充效果：当页面滚动时，由于粘性定位和绝对定位的巧妙结合，以及外部容器的裁剪，活动线会从底部向上逐渐“填充”基线，营造出颜色渐变的效果。

2. HTML 结构

首先，我们需要构建相应的HTML骨架来承载时间轴的各个部分。

魔搭MCP广场

聚合优质MCP资源，拓展模型智能边界

96

查看详情

立即学习“前端免费学习笔记（深入）”；

<div class="area">
  <!-- 包含时间轴的通用区域 -->
  <div class="timeline-box">
    <!-- 包含所有时间轴元素的盒子，可移动和调整大小 -->
    <div class="baseline"></div>
    <!-- 静态时间轴基线 -->
    <div class="timeline">
      <!-- 粘性时间轴容器 -->
      <div></div>
      <!-- 活动时间轴线条 -->
    </div>
  </div>
</div>
<!-- 确保body有足够的滚动高度以触发效果 -->
<!-- 更多内容或空白区域 -->

• .area: 这是一个通用容器，用于包裹整个时间轴区域。
• .timeline-box: 这是时间轴的核心容器，它定义了时间轴的可见区域，并负责裁剪超出部分。
• .baseline: 这就是我们静态的、未激活的灰色线条。
• .timeline: 这个元素是关键，它将被设置为position: sticky。
• .timeline > div: 这是实际的“活动”线条，它会随着滚动而逐渐显示，改变颜色。

3. CSS 实现

接下来，我们为上述HTML结构添加样式，实现动态线条填充效果。

body {
  /* 确保body有足够的滚动高度来触发粘性效果和线条填充 */
  height: 200vh; 
  margin: 0; /* 移除默认边距 */
}

.area {
  /* 定义时间轴区域的高度和背景 */
  height: 120vh;
  background: #f6f8ff;
}

.timeline-box {
  /* 时间轴内容的容器，设置相对定位以便内部绝对定位元素参照 */
  height: 120vh;
  position: relative;
  /* 关键：裁剪超出此容器的内容，实现线条填充效果 */
  overflow-y: clip; 
  padding-left: 256px; /* 示例：为时间轴内容预留空间 */
}

.baseline {
  /* 静态基线样式 */
  width: 32px; /* 线条宽度 */
  height: 120vh; /* 与timeline-box高度一致 */
  position: absolute; /* 绝对定位，脱离文档流 */
  top: 0;
  background: #d9d9e8; /* 基线颜色 */
  /* 居中基线 (根据padding-left调整) */
  left: 256px; /* 与padding-left保持一致，将基线放置在内容区域左侧 */
  transform: translateX(-50%); /* 微调使其居中于256px位置 */
}

.timeline {
  /* 粘性容器，当滚动到顶部时固定 */
  width: 32px; /* 与基线宽度一致 */
  position: sticky; /* 关键：使元素在滚动时粘性定位 */
  top: 0; /* 当元素顶部到达视口顶部时固定 */
  /* 居中粘性容器 */
  left: 256px; /* 与padding-left保持一致 */
  transform: translateX(-50%); /* 微调使其居中 */
}

.timeline > div {
  /* 活动线条样式 */
  position: absolute; /* 绝对定位，参照其父元素.timeline */
  width: 100%; /* 宽度与父元素.timeline一致 */
  height: 120vh; /* 与timeline-box高度一致 */
  background: #5c53f3; /* 填充颜色 */
  /* 关键：初始时将线条顶部定位在父元素上方100vh处 */
  /* 由于height: 120vh，这意味着其底部20vh会与父元素顶部对齐 */
  /* 结合overflow-y: clip，大部分线条初始时被隐藏 */
  top: -100vh; 
}

3.1 样式解析

1. body: 设置height: 200vh是为了确保页面有足够的滚动空间，这样position: sticky才能触发，并且活动线有足够的距离来“填充”。
2. .area: 定义了时间轴所在的整体区域，设置了背景色和高度。
3. .timeline-box:
   • height: 120vh: 定义了时间轴的可见高度。
   • position: relative: 为内部的绝对定位元素提供参照。
   • overflow-y: clip: 这是实现填充效果的关键之一。 它会裁剪掉任何超出.timeline-box垂直方向的内容。这意味着.timeline > div的隐藏部分在没有滚动时是不可见的。
   • padding-left: 256px: 为时间轴内容（如果存在）预留空间，并用于定位线条。
4. .baseline:
   • width: 32px, height: 120vh: 定义了静态基线的尺寸。
   • position: absolute, top: 0: 将基线绝对定位在.timeline-box的左侧。
   • left: 256px; transform: translateX(-50%);: 结合padding-left将基线水平居中于内容区域的左侧边缘。
5. .timeline:
   • width: 32px: 与基线宽度一致。
   • position: sticky: 这是实现动态效果的核心。 当用户滚动页面，.timeline元素的顶部到达视口顶部时，它会“粘”在视口顶部，不再随页面滚动。
   • top: 0: 指定了粘性元素在视口中的固定位置。
   • left: 256px; transform: translateX(-50%);: 与基线相同的定位方式，确保活动线与基线对齐。
6. .timeline > div:
   • position: absolute: 相对于其父元素.timeline进行定位。
   • width: 100%, height: 120vh: 宽度与.timeline一致，高度与.timeline-box一致。
   • background: #5c53f3: 定义活动线的颜色。
   • top: -100vh: 这是实现填充效果的另一个关键。 它将活动线向上移动了100vh。由于活动线自身高度为120vh，这意味着其底部20vh会与父元素.timeline的顶部对齐。当页面滚动时，timeline粘性固定，而.timeline > div相对于timeline的位置不变。然而，由于整个.timeline-box的overflow-y: clip，并且body有足够的滚动高度，随着用户滚动，timeline-box下方的内容向上移动，使得.timeline > div从底部逐渐“暴露”出来，营造出线条填充的视觉效果。

4. 浏览器兼容性与注意事项

• position: sticky 兼容性: position: sticky在现代浏览器中得到了广泛支持（例如Chrome, Firefox, Safari, Edge）。但在IE浏览器中不兼容。在部署前，请务必检查目标用户群的浏览器兼容性需求。可以通过Can I use查询详细兼容性信息。
• body 高度: 确保body或其他可滚动容器有足够的height（例如200vh），以提供足够的滚动距离来触发和完成线条填充效果。如果滚动距离不足，效果可能不完整。
• 元素高度匹配: .area, .timeline-box, .baseline, .timeline > div的高度（120vh）需要保持一致，以确保线条能够完整填充。
• 定位调整: 示例中的padding-left和left/transform用于将线条放置在特定位置。在实际项目中，您可能需要根据布局调整这些值。
• 仅线条效果: 本教程侧重于线条的颜色填充效果。如果需要添加时间点、图标、文字描述等更丰富的时间轴内容，需要在.timeline-box内部额外添加元素，并调整布局。

5. 总结

通过利用CSS的position: sticky、overflow-y: clip和绝对定位，我们可以纯粹地实现一个视觉上引人注目的时间轴线条颜色填充效果。这种方法避免了JavaScript的复杂性，提高了页面的性能和可维护性。理解这些CSS属性的协同工作方式是实现此类动态效果的关键。在实际应用中，根据项目需求调整颜色、尺寸和定位，可以创造出多样化的时间轴交互体验。

以上就是纯CSS实现滚动时动态时间轴线条颜色填充效果的详细内容，更多请关注php中文网其它相关文章！