時間軸是一種很受歡迎的展示時間流逝的布局方式，而CSS特效可以讓時間軸更加生動有趣。下面我們來看一下如何通過CSS特效為時間軸增添活力。

.timeline {
list-style: none;
margin: 0;
padding: 0;
}
.timeline li {
position: relative;
padding-left: 50px;
margin-bottom: 50px;
}
.timeline li::before {
content: '';
position: absolute;
left: 22px;
top: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #333;
z-index: 1;
}
.timeline li:nth-child(even)::before {
left: auto;
right: 22px;
}

以上代碼是一個基本的時間軸布局，每個時間點的小圓點通過偽元素添加。現(xiàn)在我們來增加一些動態(tài)效果。

.timeline li::after {
content: '';
position: absolute;
left: 10px;
top: 0;
width: 2px;
height: 100%;
background-color: #333;
z-index: 0;
transition: height 0.5s ease;
}
.timeline li:nth-child(even)::after {
left: auto;
right: 10px;
}

通過添加偽元素::after，我們對每個時間點之間的線條進行了樣式的定義，并添加了一個高度的過渡動畫。

.timeline li:hover::after {
height: 0;
}

最后，當鼠標懸停在時間點上時，我們可以通過:hover偽類來觸發(fā)動態(tài)效果，將線條高度設為零。這個簡單的效果能夠讓時間軸更加生動有趣。