CSS時間軸是一種常見的網(wǎng)頁交互設計，它可以用來展示某些時間序列的事件，如個人履歷、歷史事件等。下面我們來看一下如何用CSS代碼實現(xiàn)一個時間軸。

/* 定義時間軸容器 */
.time-axis {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
/* 定義時間軸中每個事件的容器 */
.time-point {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 50px;
}
/* 定義時間軸中每個事件的時間 */
.time {
position: absolute;
right: -156px;
top: 0;
z-index: 1;
padding: 10px;
background: #333;
color: #fff;
font-size: 24px;
font-weight: bold;
text-align: center;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 100%;
}
/* 定義時間軸中每個事件的內(nèi)容 */
.time-content {
padding-left: 50px;
}
/* 定義時間軸中每個事件的內(nèi)容的標題 */
.time-title {
color: #333;
font-size: 24px;
font-weight: bold;
margin: 0;
}
/* 定義時間軸中每個事件的內(nèi)容的描述 */
.time-desc {
color: #666;
font-size: 18px;
margin-top: 10px;
}

上述代碼實現(xiàn)了時間軸容器的定義和每個事件的容器、時間、內(nèi)容、標題、描述的定義。接下來只需要在HTML中按照這樣的結構來實現(xiàn)時間軸的樣式。