CSS3实现时间轴效果的完整攻略分为以下几个步骤:
1.准备工作
首先,在HTML页面中创建一个div元素,用于承载时间轴。并且定义好该元素的样式。常见的时间轴样式有竖直和水平两种,这里以竖直时间轴为例进行说明。
<div class="timeline">
<!-- timeline items go here -->
</div>
.timeline {
position: relative;
width: 100%;
margin: 20px auto;
padding: 20px 0;
list-style: none;
text-align: center;
}
2.创建时间轴项
在时间轴div中,创建时间轴项(也即事件),每个时间轴项由一个圆圈和一段描述文字组成。圆圈的样式是时间轴项最为重要的部分,可以通过CSS3中的伪元素和动画来实现。
<li class="timeline-item">
<div class="timeline-icon"></div>
<div class="timeline-content">
<h2>事件1</h2>
<p>描述文字1</p>
</div>
</li>
.timeline-icon {
position: absolute;
top: 0;
left: 50%;
margin-left: -12px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #c0c0c0;
z-index: 1;
}
.timeline-icon::before {
content: "";
position: absolute;
top: 5px;
left: -26px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #c0c0c0;
z-index: -1;
}
.timeline-icon::after {
content: "";
position: absolute;
top: 13px;
left: -6px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid #c0c0c0;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
z-index: -1;
}
.timeline-content {
position: relative;
width: 45%;
padding: 20px;
margin-left: 30px;
background-color: #f1f1f1;
border-radius: 6px;
}
3.实现时间轴展现效果
对时间轴项进行排版,排在时间轴的左侧或者右侧,也就是通过CSS3的float属性来控制。同时为了达到最佳的展现效果,还需要通过CSS3的伪元素和动画来实现垂直对齐和过渡效果。
以下是时间轴的完整代码示例:
<ul class="timeline">
<li class="timeline-item">
<div class="timeline-icon"></div>
<div class="timeline-content">
<h2>事件1</h2>
<p>描述文字1</p>
</div>
</li>
<li class="timeline-item">
<div class="timeline-icon"></div>
<div class="timeline-content">
<h2>事件2</h2>
<p>描述文字2</p>
</div>
</li>
<li class="timeline-item">
<div class="timeline-icon"></div>
<div class="timeline-content">
<h2>事件3</h2>
<p>描述文字3</p>
</div>
</li>
</ul>
.timeline {
position: relative;
width: 100%;
margin: 20px auto;
padding: 20px 0;
list-style: none;
text-align: center;
}
.timeline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
width: 6px;
background-color: #c0c0c0;
z-index: -1;
}
.timeline-item {
clear: both;
position: relative;
margin: 20px 0;
}
.timeline-icon {
position: absolute;
top: 0;
left: 50%;
margin-left: -12px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #c0c0c0;
z-index: 1;
}
.timeline-icon::before {
content: "";
position: absolute;
top: 5px;
left: -26px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #c0c0c0;
z-index: -1;
}
.timeline-icon::after {
content: "";
position: absolute;
top: 13px;
left: -6px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid #c0c0c0;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
z-index: -1;
}
.timeline-content {
position: relative;
width: 45%;
padding: 20px;
margin-left: 30px;
background-color: #f1f1f1;
border-radius: 6px;
}
.timeline-item:before {
content: "";
position: absolute;
top: 30px;
right: 100%;
margin-right: -15px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-right: 15px solid #f1f1f1;
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
}
.timeline-item:after {
content: "";
position: absolute;
top: 30px;
left: 100%;
margin-left: -15px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #f1f1f1;
}
.timeline-item:nth-child(even) .timeline-content {
float: right;
margin-right: 30px;
margin-left: 0;
}
.timeline-item:nth-child(even):before {
right: auto;
left: -15px;
border-right: 15px solid transparent;
border-left: 15px solid #f1f1f1;
}
.timeline-item:nth-child(even):after {
right: auto;
left: 100%;
border-right: 15px solid #f1f1f1;
border-left: 15px solid transparent;
}
以上代码实现了一个简单的竖直时间轴,当页面滚动到时间轴所在的位置时,将发生动画效果,使得时间轴项依次展现。同时,我们还可以通过添加一些特效,例如延迟加载、滑动效果等等,进一步增加时间轴的展示效果。
以下是一个基于上述代码的示例,实现了一个具有滑动效果的时间轴:
https://codepen.io/andytran/pen/GpyKLM
以下是另一个具有折线图形的时间轴示例,其核心代码与上述示例类似,不同之处在于对时间轴icon和伪元素的样式进行了修改:
https://codepen.io/alezilla/pen/MwYMpK
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS3实现时间轴效果 - Python技术站