css计数器
counter-reset:counterName
//创建或重置计数器
counter-increment:counterName
//递增变量
content:插入生成的内容
//一般和伪类 ::before
或::after
搭配使用
counter(counterName)或counters(函数)
//将计数器的值添加到元素
先展示效果图,然后下面是代码。虽然看着简单,但用到的知识点蛮多的。
最重要的是代码的可扩展性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
counter-reset: counter;
}
.circle_container {
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
/* margin-top: 30px; */
}
.circle_container li {
counter-increment: counter;
list-style: none;
flex-grow: 1;
position: relative;
}
.circle_container li:last-child{
flex-grow: 0;
}
.circle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #BCBCBC;
display: flex;
justify-content: center;
align-items: center;
}
li .line{
width: 100%;
height: 2px;
background-color: #bcbcbc;
position: absolute;
top: 20px;
left: 0;
z-index: -1;
}
.circle_container li:last-child .line{
display: none;
}
.circle_num {
width: 32px;
height: 32px;
border-radius: 50%;
line-height: 35px;
text-align: center;
color: #fff;
font-weight: bold;
}
.circle_num::after {
content: counter(counter)
}
.circle_detail {
margin-top: 10px;
color: #444;
font-weight: bold;
}
.circle_detail::after {
content: '第'counter(counter)'步'
}
.finished .circle{
background-color:#00BC9B;
}
.finished .circle_num{
border: 2px solid #fff;
}
.finished .circle_detail{
color:#00BC9B;
}
.finished .line{
background-color: #00BC9B;
}
</style>
</head>
<body>
<ul class="circle_container">
<li class="finished">
<div class="line"></div>
<div class='circle'>
<span class='circle_num'></span>
</div>
<div class="circle_detail"></div>
</li>
<li class="finished">
<div class="line"></div>
<div class='circle'>
<div class='circle_num'></div>
</div>
<div class="circle_detail"></div>
</li>
<li>
<div class="line"></div>
<div class='circle'>
<span class='circle_num'></span>
</div>
<div class="circle_detail"></div>
</li>
<li>
<div class="line"></div>
<div class='circle'>
<span class='circle_num'></span>
</div>
<div class="circle_detail"></div>
</li>
</ul>
</body>
</html>