要使用 CSS 制作时间轴，需要使用一些基本的 CSS 属性和值，例如 position, display, margin, padding, border, background, font-size, font-weight 等等。以下是一个简单的示例 CSS 代码：
.timeline {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 0;
border-left: 2px solid #ccc;
}
.timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background: #ccc;
}
.timeline-item {
position: relative;
display: flex;
align-items: center;
margin: 30px 0;
}
.timeline-item::before {
content: "";
position: absolute;
top: 50%;
left: -10px;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #fff;
border: 2px solid #ccc;
}
.timeline-item::after {
content: "";
position: absolute;
top: 50%;
left: -2px;
width: 10px;
height: 2px;
transform: translate(-50%, -50%);
background: #ccc;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-item__date {
position: absolute;
top: -40px;
font-size: 14px;
font-weight: bold;
background: #fff;
padding: 0 10px;
border: 2px solid #ccc;
border-radius: 20px;
}
.timeline-item__content {
margin-left: 30px;
font-size: 16px;
font-weight: bold;
}这段代码会创建一个时间轴，其中每个项目都有一个日期、一个内容和一个小圆点。通过调整 CSS 属性和值，可以自定义时间轴的外观和样式。