.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的过渡效果来使时间节点在鼠标悬停时放大，以增加交互性。大家还使用了类选择器来为选中的时间节点添加了边框和背景色。