时间线（步骤条）

效果如图

javascript 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				width: 100vw;
				height: 100vh;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 50px;
			}

			.time-box {
				width: 300px;
			}

			.time {
				position: relative;
				box-sizing: border-box;
				padding: 0 0 10px 20px;
			}

			.time:before {
				position: absolute;
				left: 0;
				top: 5px;
				content: '';
				display: block;
				background-color: red;
				width: 10px;
				height: 10px;
				border-radius: 10px;
				z-index: 2;
			}

			.time.active:before {
				background: skyblue;
			}

			.time:not(:last-child)::after {
				position: absolute;
				left: 5px;
				top: 5px;
				content: '';
				display: block;
				background-color: #000;
				width: 1px;
				height: 100%;
			}
			.time.active:after {
				background: skyblue;
			}

			.time-box2 {
				display: flex;
				width: 500px;
			}

			.time2 {
				position: relative;
				padding: 20px 20px 0 0px;
			}

			.time2:before {
				position: absolute;
				left: 0;
				top: 0;
				content: '';
				display: block;
				background-color: red;
				width: 10px;
				height: 10px;
				border-radius: 10px;
				z-index: 2;
			}

			.time2:not(:last-child)::after {
				position: absolute;
				left: 0;
				top: 5px;
				content: '';
				display: block;
				background-color: #000;
				width: 100%;
				height: 1px;
			}
		</style>
	</head>
	<body>
		<div class="time-box">
			<div class="time active">
				<div class="text">
					竖向 时间线
				</div>
			</div>
			<div class="time">
				<div class="text">
					时间线2
				</div>
				<div class="text">
					时间线2
				</div>
				<div class="text">
					时间线2
				</div>
				<div class="text">
					时间线2
				</div>
			</div>
			<div class="time">
				<div class="text">
					时间线3
				</div>
				<div class="text">
					时间线3
				</div>
				<div class="text">
					时间线3
				</div>
				<div class="text">
					时间线3
				</div>
			</div>
			<div class="time">
				<div class="text">
					时间线4
				</div>
				<div class="text">
					时间线4
				</div>
				<div class="text">
					时间线4
				</div>
				<div class="text">
					时间线4
				</div>
			</div>
		</div>
		<div class="time-box2">
			<div class="time2">
				<div class="text">
					横向 时间线
				</div>

			</div>
			<div class="time2">
				<div class="text">
					时间线2
				</div>
				<div class="text">
					时间线2
				</div>
				<div class="text">
					时间线2
				</div>
				<div class="text">
					时间线2
				</div>
			</div>
			<div class="time2">
				<div class="text">
					时间线3
				</div>
				<div class="text">
					时间线3
				</div>
				<div class="text">
					时间线3
				</div>
				<div class="text">
					时间线3
				</div>
			</div>
			<div class="time2">
				<div class="text">
					时间线4
				</div>
				<div class="text">
					时间线4
				</div>
				<div class="text">
					时间线4
				</div>
				<div class="text">
					时间线4
				</div>
			</div>
		</div>
	</body>
</html>

你的这个时间线 Demo 非常适合用于教学博客！它通过纯 CSS 实现了竖向和横向两种时间线布局，并巧妙地利用 :before 和 ::after 伪元素绘制连接线与节点，同时通过 .active 类实现了"激活状态"的视觉反馈------这正是步骤条（Step Progress）组件的核心思想。

下面我为你整理一份结构清晰、适合写进博客的教学解释文案，你可以直接使用或稍作修改：

🕒 纯 CSS 实现竖向 & 横向时间线（可拓展为步骤条）

在前端开发中，时间线（Timeline） 和 步骤条（Step Progress） 是常见的 UI 组件，常用于展示流程、历史事件或操作引导。今天，我们就用 纯 HTML + CSS 来实现一个简洁、可复用的时间线组件，并支持"激活项"高亮，轻松拓展为交互式步骤条！

🧱 核心思路

利用 伪元素 ::before 绘制圆形节点（时间点）
利用 伪元素 ::after 绘制连接线（时间轴）
通过 .active 类控制当前步骤的样式（如颜色变化）
分别实现 竖向排列 和 横向排列 两种布局

🔽 竖向时间线实现

HTML 结构

html 复制代码

<div class="time-box">
  <div class="time active">...</div>
  <div class="time">...</div>
  <!-- 更多步骤 -->
</div>

关键 CSS 技巧

css 复制代码

.time {
  position: relative;
  padding: 20px 0 10px 20px; /* 左侧留出空间给时间轴 */
}

/* 圆形节点 */
.time::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  z-index: 2;
}

/* 垂直线（时间轴） */
.time::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  width: 1px;
  height: 100%;
  background-color: #000;
}

💡 注意：.time::after 的 height: 100% 会延伸到每个 .time 元素的底部，从而形成连续的竖线。

激活状态（.active）

css 复制代码

.time.active::before {
  background: skyblue;
}
.time.active::after {
  background: skyblue;
}

这样，当前步骤的节点和连接线都会高亮，视觉上更突出！

➡️ 横向时间线实现

HTML 结构

html 复制代码

<div class="time-box2"> <!-- 使用 flex 横向排列 -->
  <div class="time2">...</div>
  <div class="time2">...</div>
</div>

关键差异

容器 .time-box2 使用 display: flex 实现横向布局
连接线从垂直变为水平

css 复制代码

.time2::before {
  /* 节点位置：左上角 */
  left: 5px;
  top: 0;
}

.time2::after {
  /* 水平线：从节点向右延伸 */
  left: 5px;
  top: 5px;
  width: 100%;   /* 横向拉满 */
  height: 1px;   /* 变成细线 */
  background-color: #000;
}

⚠️ 注意：横向时间线的连接线是每个 .time2 自己画的"右边部分"，所以最后一个元素的线可能会超出容器。实际项目中可通过 :not(:last-child)::after 优化。

🚀 拓展为交互式步骤条

你只需：

用 JavaScript 动态切换 .active 类（例如点击下一步）
添加过渡动画（如 transition: background 0.3s）
配合内容区域切换，即可实现完整的分步引导流程

示例逻辑（伪代码）：

js 复制代码

steps.forEach((step, index) => {
  step.addEventListener('click', () => {
    steps.forEach(s => s.classList.remove('active'));
    step.classList.add('active');
    showContent(index);
  });
});

✅ 总结

特性	实现方式
时间节点	`::before` + `border-radius: 50%`
时间轴线	`::after` + 宽/高控制方向
激活高亮	`.active` 类覆盖颜色
布局切换	父容器用 `flex` 控制子项排列方向

时间线 （步骤条）

效果如图

🕒 纯 CSS 实现竖向 & 横向时间线（可拓展为步骤条）

🧱 核心思路

🔽 竖向时间线实现

HTML 结构

关键 CSS 技巧

激活状态（.active）

➡️ 横向时间线实现

HTML 结构

关键差异

🚀 拓展为交互式步骤条

✅ 总结

时间线（步骤条）