css 垂直时间轴 竖线

在网页设计中，垂直时间轴是一种常见的展示信息的方式。垂直时间轴通常会配以一条竖线来表示时间轴的走向，这条竖线是如何实现的呢？这就需要使用CSS来设置了。

.timeline {
      position: relative;
}
.timeline::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      border-left: 2px solid #ddd;
}

首先，我们需要为我们的时间轴设置一个相对定位的父级元素。然后，我们使用CSS的伪元素::before来为这个父级元素添加一条竖线。伪元素的content属性设置为空，是因为我们不需要在竖线上添加任何文字或图像。然后，我们将竖线的位置设置成了在父级元素的中间位置，通过为竖线添加一个border-left属性来设置竖线的样式为2像素宽的实线，颜色为#ddd。

有了垂直时间轴的竖线之后，我们还可以为时间轴中每个事件添加一个带圆圈的图标，如下所示：

.timeline-event {
      position: relative;
}
.timeline-event::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -10px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #ddd;
      transform: translateY(-50%);
}
    

同样地，我们需要为每个时间轴事件设置一个相对定位的父级元素，并使用伪元素::before来添加一个圆圈图标。我们将圆圈的位置设置为在父级元素的左侧，使其与竖线对齐，并使用border-radius属性将圆圈变成一个圆形。我们还指定了圆圈的颜色为#ddd，并使用transform属性使圆圈垂直居中显示。

通过这样设置，我们就可以轻松实现垂直时间轴的竖线和圆圈图标了。当然，还有很多其他的样式可以用来美化时间轴，例如为每个事件添加描述文字、为日期添加动画等等。让我们一起努力，让时间轴更加美观和实用吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！