<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body {
overflow-x: hidden;
}
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
}
/*流程步骤*/
.check-flow2 {
display: inline-block;
width: 100%;
height: auto;
padding-top: 10px;
padding-bottom: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
}
.check-flow2 li {
position: relative;
width: 20%;
float: left;
text-align: center;
}
/*圆和线*/
.cirAndArr {
display: inline-block;
height: 30px;
width: 100%;
padding-bottom: 5px;
}
/*圆*/
.cirAndArr .circle {
display: inline-block;
position: absolute;
top: -2px;
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
margin-left: -5%;
border-radius: 50%;
background:#c2c2c2;
}
.cirAndArr .flow2-line {
display: inline-block;
width:100%;
height: 4px;
background: #c2c2c2;
}
.check-flow2 li:first-child .flow2-line {
width: 50%;
margin-left: 50%;
}
.check-flow2 li:last-child .flow2-line{
width: 50%;
margin-left: -50%;
}
/*当前闪烁*/
.check-flow2 .active {
background-color: #009688;
-webkit-animation: flicker 1.2s infinite linear;
-moz-animation: flicker 1.2s infinite linear;
animation: flicker 1.2s infinite linear;
}
/*已经完成*/
.check-flow2 .alreaded {
background: #009688;
}
@keyframes flicker {
0% {
background: #c2c2c2;
}
100% {
background: #009688;
}
}
/*流程步骤-end*/
</style>
<title>Document</title>
</head>
<body>
<ul class="check-flow2">
<li>
<!-- 圆和箭头 -->
<div class="cirAndArr">
<!-- 线 -->
<span class="flow2-line alreaded"></span>
<!-- 圆 -->
<span class="circle alreaded">1</span>
</div>
<p>开始</p>
</li>
<li>
<div class="cirAndArr">
<span class="flow2-line alreaded"></span>
<span class="circle active">2</span>
</div>
<p>第一步</p>
</li>
<li>
<div class="cirAndArr">
<span class="flow2-line"></span>
<span class="circle">3</span>
</div>
<p>第二步</p>
</li>
<li>
<div class="cirAndArr">
<span class="flow2-line"></span>
<span class="circle ">4</span>
</div>
<p>第三步我是很长的文字我是很长的文字我是很长的文字我是很长的文字我是很长的文字我是很长的文字第三步我是很长的文字我是很长的文字第三步我是很长的文字我是很长的文字第三步我是很长的文字我是很长的文字第三步我是很长的文字我是很长的文字</p>
</li>
<li>
<div class="cirAndArr">
<span class="flow2-line"></span>
<span class="circle ">5</span>
</div>
<p>结束</p>
</li>
</ul>
</body>
</html>
