CSS動態(tài)條形加載條效果的示例代碼

發(fā)布時間：2020-08-07 15:23:28 作者：Army-海軍

這篇文章主要介紹了CSS動態(tài)條形加載條效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

運用了css變量的知識，直接上代碼及其我加的注釋

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>展示一個css動態(tài)條形加載條</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>

看效果