如何使用 CSS 创建时间轴？

时间轴是一种很有用的设计元素，可以用于展示具有时间顺序的事件，如公司历程、个人成长经历等。在此我们将介绍如何使用 CSS 创建时间轴，来呈现逐步演变的时序信息。

实现思路

我们将使用 CSS 中的伪类 :before 和 :after 来创建时间轴的节点和连线。具体实现步骤如下：

1. 创建节点容器并设定 position: relative 属性。
2. 创建节点元素并设定 position: absolute 属性、节点圆形/方形结构、背景颜色、圆角半径等样式。
3. 使用 :before 伪类来创建节点圆形左边的连线，设定绝对定位、线形式、线的宽度、颜色、起止位置等样式。
4. 使用 :after 伪类来创建节点圆形右边的连线，设定绝对定位、线形式、线的宽度、颜色、起止位置等样式。
5. 按照时间顺序排列节点元素。

代码实现

HTML

<div class="timeline">
  <div class="node">
    <h3>Event 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <span class="date">Jan 1, 2020</span>
  </div>
  <div class="node">
    <h3>Event 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <span class="date">Feb 15, 2020</span>
  </div>
  <div class="node">
    <h3>Event 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <span class="date">Apr 1, 2020</span>
  </div>
</div>

CSS

.timeline {
  margin: 0 auto;
  position: relative;
  width: 80%;
}

.node {
  margin: 50px 0;
  position: relative;
  width: 50%;
}

.node h3 {
  margin: 0;
  padding: 0 0 5px;
}

.node p {
  margin: 0 0 15px;
}

.node .date {
  color: #999;
}

.node:before {
  background-color: #ddd;
  content: "";
  height: 20px;
  left: -10px;
  position: absolute;
  top: 15px;
  width: 20px;
  border-radius: 50%;
}

.node:after {
  background-color: #ddd;
  content: "";
  height: 100%;
  left: -9px;
  position: absolute;
  top: 35px;
  width: 2px;
}

.node:first-child:before {
  top: 40px;
}

.node:last-child:before {
  top: -5px;
}

.node:nth-child(even) {
  float: right;
  text-align: right;
}

.node:nth-child(even):before {
  left: auto;
  right: -10px;
}

.node:nth-child(even):after {
  left: auto;
  right: -9px;
}

效果预览

在以上代码中，我们使用 nth-child(even) 来控制节点的位置，实现了“向左”的效果。当然，您也可以通过修改样式表中的一些属性以更改时间线条的颜色、粗细、节点大小等。