zoukankan      html  css  js  c++  java
  • 纯CSS打造进度条

    进度条效果如下:

    CSS部分


    body {
    background-color: white;
    }

    .progress-bar {
    display: flex;
    flex-direction: row;
    }

    .item {
    display: flex;
    1%;
    flex-grow: 1;
    padding-top: 20px;
    justify-content: center;
    position: relative;
    padding-top: 20px;
    }

    .item:first-child,
    .item:last-child {
    auto;
    flex-grow: 0;
    flex-shrink: 0;
    }

    .item > .cycle {
    z-index: 2;
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -5px;
    10px;
    height: 10px;
    border-radius: 50%;
    background-color: red;
    }

    .item.active > .cycle {
    top: 1px;
    margin-left: -9px;
    18px;
    height: 18px;
    }

    .item:before, .item:after {
    z-index: 1;
    content: "";
    50%;
    height: 6px;
    position: absolute;
    top: 7px;
    background-color: red;
    }

    .item:before {
    left: 0;
    }

    .item:after {
    left: 50%;
    }

    .item:first-child:before,
    .item:last-child:after {
    display: none;
    }

    .item.active:after,
    .item.active ~ .item:before,
    .item.active ~ .item.after,
    .item.active ~ .item > .cycle {
    background-color: #999;
    }

    HTML部分


    <div class="progress-bar">
    <div class="item">
    <div class="cycle"></div>
    <div class="text">提交</div>
    </div>
    <div class="item">
    <div class="cycle"></div>
    <div class="text">人力审核</div>
    </div>
    <div class="item">
    <div class="cycle"></div>
    <div class="text">审核完成发放</div>
    </div>
    <div class="active item">
    <div class="cycle"></div>
    <div class="text">审核完成发放</div>
    </div>
    </div>

     

    不积跬步无以至千里
  • 相关阅读:
    解决跨域之服务器代理http-proxy-middleware模块
    npm、yarn、nrm包管理工具
    nodeJS基础
    gulp自动化构建工具应用
    六种继承方式
    七种去重的方法
    初识模块化
    针对PHP网站攻击的几种方式
    oracle备份恢复(dmp文件)
    nginx.conf中文详解
  • 原文地址:https://www.cnblogs.com/weilingfamily/p/7716632.html
Copyright © 2011-2022 走看看