Html
    Css
    Js

    
                        
  .sv-timeline {
	margin:0;
	font-size:14px;
	list-style:none;
}
.sv-timeline-item {
	position:relative;
	padding-bottom:26px;
}
.sv-timeline-item__tail {
	position:absolute;
	left:5px;
	/* height:100%;
	*/
    border-left:2px solid rgb(11,189,135);
	top:13px;
	bottom:0;
}
.sv-timeline-item__node--primary {
	background-color:#409eff;
}
.sv-timeline-item__node--large {
	left:-2px;
	width:14px;
	height:14px;
}
.sv-timeline-item__content {
	color:#303133;
}
.sv-timeline-item__timestamp.is-bottom {
	color:#01c198;
	font-size:14px;
	margin-right:15px;
	display:flex;
	align-items:center;
}
.sv-timeline-item__timestamp {
	color:#909399;
	line-height:1;
	font-size:13px;
}
.sv-timeline-item__wrapper {
	position:relative;
	padding-left:22px;
	top:-2px;
}
.sv-timeline-item__node--normal {
	left:-1px;
	width:12px;
	height:12px;
}
.sv-timeline-item__node {
	position:absolute;
	border:rgb(11,189,135) 1px solid;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.sv-timeline-item__node>div {
	width:8px;
	height:8px;
	background-color:rgb(11,189,135);
	border-radius:50%;
}
.sv-timeline-item__wrapper {
	display:flex;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css 实现时间线

更新时间:2021-09-18 10:29:30

0