時(shí)間軸是展示歷史事件或項(xiàng)目進(jìn)度的一種常見(jiàn)形式，而用CSS3制作時(shí)間軸可以讓其更加美觀和交互感。以下是CSS3時(shí)間軸的代碼實(shí)現(xiàn)：

.timeline {
list-style: none;
padding: 0;
position: relative;
margin-top: 50px;
}
.timeline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background-color: #ddd;
left: 50%;
margin-left: -1px;
}
.timeline >li {
margin-bottom: 50px;
position: relative;
}
.timeline >li:before,
.timeline >li:after {
content: " ";
display: table;
}
.timeline >li:after {
clear: both;
}
.timeline >li:before,
.timeline >li:after {
content: " ";
display: table;
}
.timeline >li:after {
clear: both;
}
.timeline >li >.timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline >li >.timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline >li.timeline-inverted >.timeline-panel {
float: right;
}
.timeline >li.timeline-inverted >.timeline-panel:before {
border-right-width: 0;
border-left-width: 15px;
right: -15px;
left: auto;
}
.timeline >li.timeline-inverted >.timeline-panel:after {
border-right-width: 0;
border-left-width: 14px;
right: -14px;
left: auto;
}

首先是.timeline類(lèi)，用于包裹整個(gè)時(shí)間軸，包括時(shí)間軸的線(xiàn)和整個(gè)內(nèi)容。其中before元素是用來(lái)表示時(shí)間軸的線(xiàn)，通過(guò)絕對(duì)定位和margin設(shè)置位置和樣式。然后是每個(gè)時(shí)間軸項(xiàng)，用li元素包裹，里面再嵌套一個(gè).timeline-panel元素和.timeline-badge元素。這兩個(gè)元素分別表示時(shí)間軸內(nèi)容和時(shí)間軸小圓點(diǎn)。

時(shí)間軸項(xiàng)的樣式需要根據(jù)方向進(jìn)行反轉(zhuǎn)，這里通過(guò)timeline-inverted類(lèi)來(lái)實(shí)現(xiàn)，通過(guò)修改位置和樣式來(lái)達(dá)到反轉(zhuǎn)效果。通過(guò)這些CSS3代碼，你可以自己制作出一個(gè)美觀的時(shí)間軸效果。