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

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

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

運(yùn)用了css變量的知識(shí)，直接上代碼及其我加的注釋

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>展示一個(gè)css動(dòng)態(tài)條形加載條</title>
    <style>
      /* 使用CSS變量 */
      .flex {
        display: flex;
        list-style: none;
        /* 設(shè)定li元素橫向排列 */
      }
 
      .loading {
        width: 200px;
        height: 200px;
      }
 
      .loading>li {
        /* 我們?cè)诿恳粋€(gè)li元素的行內(nèi)元素都定義了一個(gè)css變量 --line-index大小不同 */
        /* 此時(shí)定一個(gè)動(dòng)畫(huà)延遲的變量--time 經(jīng)過(guò)計(jì)算calc */
        --time: calc((var(--line-index) - 1) * 200ms);
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        /* 動(dòng)畫(huà)都是一個(gè)動(dòng)畫(huà),但是開(kāi)始的時(shí)間不同,就顯示出這樣的效果了 */
        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>

看效果