css实现时间轴实现效果,前端css实现时间轴,纯css垂直时间轴,时间线css绘制
定位+伪类 简单实现
timerLine.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>timeLine</title>
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
}
.main {
width: 1200px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.timer {
padding: 40px 0;
}
.timer .main .content .item {
width: 100%;
min-height: 230px;
position: relative;
}
.timer .main .content .item h5 {
font-size: 28px;
font-weight: 400;
color: #2e2e2e;
line-height: 100px;
margin-left: 10px;
}
.timer .main .content .item .child {
position: relative;
border-left: 1px solid #E5E5E5;
height: 70px;
margin-left: 70px;
}
.timer .main .content .item .child span {
position: absolute;
top: -18px;
left: -42px;
font-size: 14px;
font-weight: 300;
color: #999999;
line-height: 36px;
}
.timer .main .content .item .child p {
position: absolute;
left: 138px;
top: -10px;
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 36px;
}
.timer .main .content .item .child::after {
content: '';
content: '';
width: 13px;
height: 13px;
display: inline-block;
background: #1260e9;
border-radius: 50%;
position: absolute;
left: -7px;
top: -5px;
}
</style>
</head>
<body>
<div class="timer tab-item">
<div class="main hidden">
<div class="content" style="width:1800px">
<div class="item">
<h5>2020</h5>
<div class="child">
<span>9月</span>
<p>xx国际乔迁新址，开启新征程</p>
</div>
</div>
<div class="item">
<h5>2019</h5>
<div class="child">
<span>11月</span>
<p>荣获“2019年广西物流企业50强”荣誉称号</p>
</div>
</div>
<div class="item">
<h5>2018</h5>
<div class="child">
<span>11月</span>
<p>荣获“2018年中国物流创新奖”</p>
</div>
<div class="child">
<span>10月</span>
<p>荣获“广西壮族自治区服务业品牌”荣誉称号</p>
</div>
<div class="child">
<span>7月</span>
<p>荣获“AAA级信用企业”荣誉称号</p>
</div>
</div>
<div class="item">
<h5>2017</h5>
<div class="child">
<span>9月</span>
<p>荣获“AAA级物流企业”荣誉称号</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>