css3做横向时间轴

CSS3可以轻松地为网页添加各种动态效果，例如制作一个横向时间轴。这种时间轴可以向左或向右滑动，让用户可以浏览过去或将来的事件。

.timeline {
    position: relative;
    margin: 50px auto;
    width: 80%;
    height: 2px;
    background-color: #4d4d4d;
}
.timeline:before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 30px;
    height: 30px;
    background-color: #4d4d4d;
    border-radius: 50%;
}
.timeline ul {
    list-style: none;
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.timeline ul:before {
    content: "";
    position: absolute;
    top: -7px;
    left: 20px;
    width: calc(100% - 40px);
    height: 2px;
    background-color: #4d4d4d;
}
.timeline ul li {
    width: 30px;
    height: 30px;
    background-color: #4d4d4d;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    transition: all .3s ease;
}
.timeline ul li:before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background-color: #f7f7f7;
    border-radius: 50%;
    z-index: -1;
}
.timeline ul li:hover {
    transform: scale(1.1);
}
.timeline ul li.active {
    background-color: #f7f7f7;
    border: 3px solid #4d4d4d;
    z-index: 2;
}
    

上述代码中，我们首先创建一个包含所有时间轴的元素，并将其设为相对定位。然后我们添加一个空的:before伪元素，并将其作为时间轴的起点。接下来，我们创建了一个无序列表

元素，并在里面添加了若干个
• 元素，每一个代表了一个时间节点。注意，我们需要将ul元素的display属性设置为flex，以使所有的
• 元素在同一水平线上。我们也给每一个
• 元素添加了一个:before伪元素，这代表了时间节点后面的圆圈。

  最后，我们使用CSS3的过渡效果来使时间节点在鼠标悬停时放大，以增加交互性。我们还使用了类选择器来为选中的时间节点添加了边框和背景色。

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