css实现横向时间轴

CSS是网页设计中常用的一种技术，它可以让我们实现各种各样的效果，比如横向时间轴。横向时间轴是一种展示时间线的方式，通常用于展示历史事件、项目进度等。下面我们来看看怎样通过CSS实现横向时间轴。

.timeline {
  position: relative;
  margin: 50px 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.timeline-item {
  position: relative;
  width: calc(100% / 5);
  padding: 50px 10px;
  text-align: center;
}

.timeline-item:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eee;
}

.timeline-item:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: #eee;
}

.timeline-item.active:before {
  background: #666;
}

首先，我们创建一个ul列表，给它添加一个名为.timeline的class。由于我们需要将时间轴放在一行，所以我们使用了flex布局。然后，我们创建一个li元素，也就是每个时间点所对应的节点，给它添加一个名为.timeline-item的class。我们使用calc()函数来计算每个节点的宽度，这里我们假设每行有5个节点。接下来，我们对每个节点的:before和:after伪元素进行样式设置。:before用于设置节点的圆点，:after用于设置节点之间的连线。最后，我们给当前节点添加.active的class，用不同的颜色显示选中的节点。