时间轴效果介绍
在前端开发中，我们会遇到一些场景特别适合用时间轴来展示，例如下面按照日期时间来记录发生的事件：
还可以做成下面这种比较流行的左右对称卡片风格的时间轴：
如果再稍加装饰，还能有更加高大上的效果：
时间轴效果本质
从上面的图中，我们可以看出来，其实时间轴效果的本质无非就是下面两点：
- 用一条自上而下的分隔线把可视区域划分为左右两块
- 分隔线中间有一些圆点代表时间节点，并在其左右展示相关信息
只要掌握了如何画分隔线，并在分隔线上面画小圆点，其实就能够做出来各种各样的时间轴效果了。今天就带领大家实现下面这种可以滚动的时间轴，在项目中非常实用，学会了之后，再也不怕产品提类似的视觉需求了。
从零开始写时间轴
初始状态
为了方便教学，我们先定义下面的空白模板：
其中 HTML 结构如下：
<body><div class="container"><div class="debug-area"><button onclick="add()">添加活动</button></div><div class="timeline-area"><div class="timeline-wrapper"><div class="timeline"></div></div></div></div>
</body>
初始 CSS 样式为：
.container {margin: auto;width: 350px;height: 350px;overflow: hidden;display: flex;flex-direction: column;padding: 0;--left: 62px;--color: #0d5dff;
}
.debug-area {margin: 30px 0;
}
.timeline-area {flex: 1;position: relative;display: flex;flex-direction: column;overflow-y: auto;padding-bottom: 10px;padding-right: 5px;border: 1px solid #ccc;
}
布局结构其实没什么好说的，就是一个固定宽高的 div，用 flex 布局分成上下两部分，上面的区域放了一个 button 用于调试，下面的区域就是用于展示时间轴内容的 div，并加了一个 border 方便大家查看。
你可能注意到上面定义了两个变量 --left和 --color，这是用来作什么的呢？接下来就知道了，请继续往下看。
添加分隔线
分隔线非常关键，应该怎么实现呢？我们先不着急写 CSS 代码，先看 HTML 结构：
<div class="timeline-wrapper"><div class="timeline"></div>
</div>
timeline-wrapper 是包裹容器，它的宽高是固定的，timeline 是真正的时间轴，当时间轴内容超出容器高度的时候可以上下自由滚动。所以添加下面的 CSS 代码：
.timeline-wrapper {flex: 1;overflow-y: auto;padding: 15px 5px 0 0;
}
.timeline {position: relative;
}
最关键的地方来了，用伪元素 before来实现分隔线：
.timeline::before {content: "";position: absolute;left: var(--left);width: 1px;top: 20px;bottom: 0;background-image: linear-gradient(to bottom,rgba(144, 156, 173, 0.6) 60%,rgba(255, 255, 255, 0) 0%);background-position: left;background-size: 1px 5px;background-repeat: repe
最低0.47元/天 解锁文章
1189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
