html5+css实现横向时间轴特效
时间: 2023-11-18 15:04:21 浏览: 35
实现横向时间轴特效可以借助CSS3的transform属性和transition属性,下面是一个简单的示例代码:
HTML部分:
```
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<h3>2021年</h3>
<p>这是一段时间轴的内容</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>2020年</h3>
<p>这是一段时间轴的内容</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>2019年</h3>
<p>这是一段时间轴的内容</p>
</div>
</div>
</div>
```
CSS部分:
```
.timeline {
position: relative;
margin: 0 auto;
padding: 20px 0;
width: 80%;
}
.timeline:before {
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -1px;
width: 2px;
height: 100%;
background-color: #ccc;
}
.timeline-item {
position: relative;
margin-bottom: 50px;
padding-left: 50px;
}
.timeline-item:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 0 2px #ccc;
}
.timeline-item:after {
content: '';
position: absolute;
top: 20px;
left: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
transform: translateX(-50%);
transition: all 0.3s ease-in-out;
}
.timeline-item:hover:after {
background-color: #000;
transform: translateX(-50%) scale(1.2);
transition: all 0.3s ease-in-out;
}
.timeline-content {
position: relative;
max-width: 400px;
}
.timeline-content h3 {
margin-top: 0;
}
.timeline-content p {
margin-bottom: 0;
}
```
这段代码实现了一个基本的横向时间轴特效,当鼠标悬停在时间轴节点上时,节点会有一个缩放的动画效果。你可以根据自己的需求修改样式或添加其他特效。