今天这篇文章，我跟大家分享一个时间轴的案例，可以用于学习也可以直接在项目里进行使用，从上往下垂直时间轴CSS样式代码。
效果如下图：
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1" />
<style>
.timeline {padding-left: 5px}
.timeline-item { position: relative;padding-bottom: 20px;}
.timeline-axis {position: absolute;left: -5px;top: 0;z-index: 10;width: 20px;height: 20px;line-height: 20px;background-color: #fff;color: #16b777;border-radius: 50%;text-align: center;cursor: pointer;}
.timeline-axis:hover {color: #ff5722}
.timeline-item:before {content: "";position: absolute;left: 5px;top: 0;z-index: 0;width: 1px;height: 100%;background: #16b777;}
.timeline-item:first-child:before {display: block;}
.timeline-item:last-child:before {display: none;}
.timeline-content {padding-left: 25px;}
.timeline-title {position: relative;margin-bottom: 10px;line-height: 22px}
.roundness{background-color: #16b777;}
</style>
</head>
<body>
<div class="mythBox mid timeline">
<div class="timeline-item">
<i class="timeline-axis roundness"></i>
<div class="timeline-content text">
<div class="timeline-title">2005年大学毕业</div>
</div>
</div>
<div class="timeline-item">
<i class="timeline-axis roundness"></i>
<div class="timeline-content text">
<div class="timeline-title">2005年大学毕业</div>
</div>
</div>
<div class="timeline-item">
<i class="timeline-axis roundness"></i>
<div class="timeline-content text">
<div class="timeline-title">2005年大学毕业</div>
</div>
</div>
</div>
</body>
</html>
发表评论 取消回复