css3垂直时间轴教学 |w3school css3

.timeline {
position: relative;
padding: 50px 0;
}
.timeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
margin-left: -1px;
background-color: #ccc;
}
.timeline li {
position: relative;
margin: 0 0 50px 0;
padding-left: 50px;
list-style: none;
}
.timeline li:before {
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -10px;
width: 20px;
height: 20px;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 50%;
}
.timeline li:after {
content: '';
position: absolute;
top: 10px;
left: -25px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid #ccc;
border-bottom: 10px solid transparent;
border-left: none;
}
.timeline li div {
position: relative;
top: -5px;
left: -10px;
display: inline-block;
padding: 6px 10px;
background-color: #f2f2f2;
border-radius: 8px;
}

用上述代码制作的时间轴，可以自适应宽度，并能添加内容。并且，这个时间轴还支持多条垂直线、样式自定义等功能。接下来，大家就需要根据自己的需求来进行定制操作，比如说可以调整线的颜色、宽度、图标的大小、样式等。

总的来说，CSS3 垂直时间轴非常实用，它是展示时间流程、发展历程等内容的最佳工具之一。在实际的项目中，只需要在页面中加入相应的代码即可轻松实现这一功能。建议大家在学习 CSS3 的过程中，多多接触、实践这种新颖的样式技术，这将有助于提高自己的前端开发技能。