如何 - 时间轴
学习如何使用 CSS 创建响应式“时间轴”。
时间轴
2017
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2016
Lorem ipsum dolor sit amet, quo ei simul congue exerci.
2015
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto perfecto perfecti perfect!
如何创建时间轴
步骤 1) 添加 HTML
示例
<div class="timeline">
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2016</h2>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
步骤 2) 添加 CSS
示例
* {
box-sizing: border-box;
}
/* 设置背景色 */
body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}
/* 实际的时间轴（垂直标尺） */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* 实际的时间轴（垂直标尺） */
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* 内容容器 */
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* 时间轴上的圆圈 */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* 将容器放在左侧 */
.left {
left: 0;
}
/* 将容器放在右侧 */
.right {
left: 50%;
}
/* 为左侧容器添加箭头（指向右侧） */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* 为右侧容器添加箭头（指向左侧） */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* 修正右侧容器的圆圈 */
.right::after {
left: -16px;
}
/* 实际内容 */
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
/* 媒体查询 - 屏幕宽度小于 600px 时的响应式时间轴 */
@media screen and (max-width: 600px) {
/* 将时间轴放在左侧 */
.timeline::after {
left: 31px;
}
/* 全宽容器 */
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* 确保所有箭头都指向左侧 */
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* 确保所有圆圈都在同一位置 */
.left::after, .right::after {
left: 15px;
}
/* 使所有右侧容器表现得像左侧容器一样 */
.right {
left: 0%;
}
}
自己动手试一试 »
