css 时间轴动态特效 |css3 sanjiaox

代码如下：
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 来实现时间轴的样式和动态效果。

通过上面的介绍，大家可以轻松地实现时间轴动态特效，为网站页面带来更多的交互和视觉上的效果。