scss实现竖向时间轴连线
时间: 2023-08-14 14:11:28 浏览: 34
要实现竖向时间轴的连线效果,你可以使用SCSS(Sass)来编写样式。以下是一个示例代码:
```scss
.timeline {
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background-color: #000;
transform: translateX(-50%);
}
.item {
position: relative;
&::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 2px;
height: 50px; // 连线的长度
background-color: #000;
transform: translateX(-50%);
}
&:last-child::after {
height: 0; // 最后一个item不需要连线
}
}
}
```
在HTML中,你可以使用`.timeline`作为外层容器,每个时间点使用`.item`元素表示。这段代码会在每个`.item`元素下方添加一个连线,除了最后一个`.item`。
```html
<div class="timeline">
<div class="item">时间点1</div>
<div class="item">时间点2</div>
<div class="item">时间点3</div>
</div>
```
你可以根据需要修改样式,比如调整连线的颜色、长度、宽度等。注意,上面的代码只是一个基础示例,你可以根据自己的需求进行扩展和调整。