流程步驟（備用）
阿新 • • 發佈：2017-12-12
mpat color log scale fin class nim ini --
<!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>
流程步驟（備用）