css实现步骤进度条效果代码-html代码-BFW代码库

css实现步骤进度条效果代码

代码语言：html

所属分类：进度条

代码描述：css实现步骤进度条效果代码，点击切换到不同的步骤和进度。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          background: #fce4ec;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        /* ------------------------- Separate line ------------------------- */
        :root {
          --breadcrumb-theme-1: #e91e63;
          --breadcrumb-theme-2: #fff;
          --breadcrumb-theme-3: #d80d52;
          --breadcrumb-theme-4: #c70041;
        }
        .breadcrumb {
          text-align: center;
          display: inline-block;
          box-shadow: 0 2px 5px rgba(0,0,0,0.25);
          overflow: hidden;
          border-radius: 5px;
          counter-reset: flag;
        }
        .breadcrumb__step {
          text-decoration: none;
          outline: none;
          display: block;
          float: left;
          font-size: 12px;
          line-height: 36px;
          padding: 0 10px 0 60px;
          position: relative;
          background: var(--breadcrumb-theme-2);
          color: var(--breadcrumb-theme-1);
          transition: background 0.5s;
        }
        .breadcrumb__step:first-child {
          padding-left: 46px;
          border-radius: 5px 0 0 5px;
        }
        .breadcrumb__step:first-child::before {
          left: 14px;
        }
        .breadcrumb__step:last-child {
          border-radius: 0 5px 5px 0;
          padding-right: 20px;
        }
        .breadcrumb__step:last-child::after {
          content: none;
        }
        .breadcrumb__step::before {
          content: counter(flag);
          counter-increment: flag;
          border-radius: 100%;
          width: 20px;
          height: 20px;
          line-height: 20px;
          margin: 8px 0;
          position: absolute;
          top: 0;
          left: 30px;
          font-weight: bold;
          background: var(--breadcrumb-theme-2);
          box-shadow: 0 0 0 1px var(--breadcrumb-theme-1);
        }
        .breadcrumb__step::after {
          content: '';
          position: absolute;
          top: 0;
          right: -18px;
          width: 36px;
          height: 36px;
          transform: scal.........完整代码请登录后点击上方下载按钮下载查看