展示一个漂亮的css动态条形加载条源码

以你之姓@ 2023-03-06 05:28 1阅读 0赞

运用了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>

看效果

![20200805170200517.gif][]

非常漂亮和顺畅

[20200805170200517.gif]: /images/20230208/1aa6560b9db244469db43cd942396b56.png