CSS 時間軸動態特效可以讓網站頁面更加生動有趣，實現動態交互效果。下面我們來介紹如何使用 CSS 來實現時間軸動態特效。

代碼如下：
html：
2019
這是2019年的內容
2018
這是2018年的內容
2017
這是2017年的內容
css：
.timeline {
position: relative;
}
.timeline .entry {
position: relative;
margin-bottom: 20px;
}
.timeline .entry .title {
position: absolute;
left: -110px;
top: 0;
width: 100px;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 10px 0;
background-color: #fff;
border: 2px solid #ccc;
box-shadow: 0 0 10px #ccc;
}
.timeline .entry .body {
position: relative;
left: 20px;
background-color: #f0f0f0;
padding: 10px;
}
.timeline .entry:before {
content: "";
position: absolute;
left: -8px;
top: 0;
width: 16px;
height: 16px;
background-color: #ccc;
border-radius: 100%;
z-index: 1;
}
.timeline .entry:after {
content: "";
position: absolute;
left: -1px;
top: 16px;
width: 10px;
height: 100%;
background-color: #ccc;
z-index: 1;
}
.timeline .entry:last-child:after {
height: 16px;
}
.timeline .entry.active:before {
background-color: #007bff;
}
.timeline .entry.active .title {
color: #007bff;
border-color: #007bff;
box-shadow: 0 0 10px #007bff;
}
.timeline .entry.active:before {
animation: blink 1s infinite;
}
@keyframes blink {
0% {
box-shadow: 0 0 10px #007bff;
}
50% {
box-shadow: 0 0 20px #007bff;
}
100% {
box-shadow: 0 0 10px #007bff;
}
}

在上面的代碼中，我們使用了 position 屬性來控制各個元素的位置，使用了 pseudo-class 來實現時間軸的樣式和動態效果。

通過上面的介紹，我們可以輕松地實現時間軸動態特效，為網站頁面帶來更多的交互和視覺上的效果。