css3 时间线

CSS3是一种用于添加样式和布局到网页的标准语言。它包含许多令人兴奋的新功能，例如时间轴。时间轴非常适合用于展示历史事件或进程。在本文中，我们将学习如何使用CSS3创建一个简单的时间轴。

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.timeline::before {
    content: ';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    width: 6px;
    background-color: #c9c9c9;
}
.timeline::after {
    content: ';
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 50%;
    margin-left: -7px;
    width: 0;
    border-top: 7px solid #c9c9c9;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}
.timeline-item {
    position: relative;
    padding: 50px 0;
    border-bottom: 1px solid #c9c9c9;
}
.timeline-item::before {
    content: ';
    position: absolute;
    top: 31px;
    left: -15px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-right: 15px solid #c9c9c9;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
}
.timeline-item-content {
    position: relative;
    width: 50%;
    padding: 10px 25px;
    background-color: #f1f1f1;
}
.timeline-item-content h3 {
    margin-top: 0;
}
.timeline-item-content p {
    margin-bottom: 0;
}
    

在上面的代码中，我们首先定义了一个名为.timeline的容器。我们使用position：relative将其相对定位，并设置最大宽度和水平居中。

接下来，我们添加:timestream和:after伪元素来创建时间轴线和时间轴点。我们使用border属性和透明度的颜色来创建箭头。这些伪元素的样式与.timeline类相结合，它们以相对位置放置。

最后，我们定义.timeline-item，它是每个时间轴项目的容器。我们使用相对和绝对定位和伪元素来创建点和连接线。每个.timeline-item-content包含标题和内容，我们设置其宽度为50％，并在内容区域中添加10像素的内边距以提高可读性。

通过应用这些简单的样式，我们可以创建一个美观的时间轴，以展示任何我们想要的历史事件或进程。

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