css计数器之小案例

最新推荐文章于 2024-08-16 20:24:29 发布

哆啦咪唏

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量115

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_42123213/article/details/113807944

版权

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>

哆啦咪唏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css计数器之小案例

css计数器counter-reset:counterName //创建或重置计数器counter-increment:counterName //递增变量content:插入生成的内容 //一般和伪类 ::before或::after搭配使用counter(counterName)或counters(函数) //将计数器的值添加到元素先展示效果图，然后下面是代码。虽然看着简单，但用到的知识点蛮多的。最重要的是代码的可扩展性<!DOCTYPE html><html la
复制链接

扫一扫