纯css实现动态条形加载条效果（附源码）

运用了CSS变量的知识，直接上代码及其我加的注释

!DOCTYPE htML>
    html>
      head>
        meta charset="utf-8">
        tITle>
    展示一个css动态条形加载条/title>
        style>
      /* 使用CSS变量 */      .flex {
            display: flex;
            list-style: none;
        /* 设定li元素横向排列 */      }
       .loading {
            width: 200px;
            height: 200px;
      }
           .loading>
li {
            /* 我们在每一个li元素的行内元素都定义了一个css变量 --line-index大小不同 */        /* 此时定一个动画延迟的变量--time 经过计算calc */        --time: calc((VAR(--line-index) - 1) * 200ms);
            border-radius: 3px;
            width: 6px;
            height: 30px;
            background-color: #f66;
            /* 动画都是一个动画,但是开始的时间不同,就显示出这样的效果了 */        animation: beat 1.5s ease-in-out var(--time) infinite;
       }
           .loading>
li+li {
            margin-left: 5px;
      }
       @keyframes beat {
         0%,        100% {
              transform: scaleY(1);
        }
         50% {
              transform: scaleY(.5);
        }
      }
        /style>
      /head>
      body>
        ul class="loading flex">
          li style="--line-index: 1;
    ">
    /li>
          li style="--line-index: 2;
    ">
    /li>
          li style="--line-index: 3;
    ">
    /li>
          li style="--line-index: 4;
    ">
    /li>
          li style="--line-index: 5;
    ">
    /li>
          li style="--line-index: 6;
    ">
    /li>
        /ul>
      /body>
    /html>
    

看效果

非常漂亮和顺畅

更多编程相关知识，请访问：编程入门！！

以上就是纯css实现动态条形加载条效果（附源码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！