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>