开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天,点击查看活动详情
最近项目里需要实现这样一个静态的横线时间轴,一开始看了element-ui的组件库,没有看到横向的版本,就自己写了。 网上找了类似的demo改了改。
布局思路:
首尾单独一个div,中间设置为居中样式 大概用到了下面的知识点
中间横线:position垂直居中
圆:定位居中,添加背景色,boder
上下错位文字是通过奇偶选择器控制定位位置。
左右两侧另外添加一个div
箭头是采用css绘制的三角形然后居中排列。
width: 0; height:0; border:10px solid transparent; border-left-color: #1890FF; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
最后贴上代码
实现代码
html
<div class="timeaxis">
<div class="box1 li">
<div class="line"></div>
</div>
<div class="boxs li" v-for="item in list" :key="item.index">
<div class="line"></div>
<div class="circular">{{ item.year }}</div>
<div class="desc">{{ item.condation }}</div>
</div>
<div class="box1 li">
<div class="line"></div>
<div
style="width: 0;height:0;border:10px solid transparent;
border-left-color: #1890FF;
position: absolute;right: -10px;top: 50%;
transform: translateY(-50%);">
</div>
</div>
</div>
</div>
css
overflow: hidden;
width: max-content;
position: relative;
height: 150px;
left: 50%;
transform: translateX(-50%);
}
.box1 {
width: 60px;
float: left;
height: 150px;
position: relative;
}
.boxs {
overflow: hidden;
float: left;
position: relative;
width: 180px;
height: 150px;
}
.line {
border-bottom: 1px solid #409eff;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.circular {
font-size: 14px;
line-height: 50px;
text-align: center;
z-index: 10;
border: 2px solid #1890FF;
width: 50px;
height: 50px;
border-radius: 50px;
background: white;
margin: auto;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
.boxs:nth-child(odd) .desc {
text-align: center;
position: absolute;
top: 0;
width: 100%;
}
.boxs:nth-child(even) .desc {
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
整体其实知道布局思路就很好实现了,很早之前的demo了,还是可以借鉴一下的。