应用了css变量的知识,立即上代码以及我加的注释

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>展现一个css动态性条型载入条</title>
    <style>
      /* 应用CSS变量 */
      .flex {
        display: flex;
        list-style: none;
        /* 设置li原素横着排序 */
      }
      .loading {
        width: 201080x;
        height: 201080x;
      }
      .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动态条形加载条效果的示例代码 css 动态 条形 加载条 CSS  第1张

到此这篇有关CSS动态性条型载入条源代码的文章内容就详细介绍到这了,大量有关css动态性条型载入条內容请搜索之前的文章内容或再次访问下边的类似文章,期待大伙儿之后多多的适用!