CSS pur pour obtenir un effet de barre de chargement de barre dynamique (code source joint)-tutoriel CSS-php.cn

CSS pur pour obtenir un effet de barre de chargement de barre dynamique (code source joint)

青灯夜游

Libérer： 2021-05-20 10:16:02

avant

2333 Les gens l'ont consulté

Cet article vous présentera comment obtenir l'effet de barre de chargement dynamique en utilisant du CSS pur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

CSS pur pour obtenir un effet de barre de chargement de barre dynamique (code source joint)

J'ai utilisé la connaissance des variables CSS et j'ai directement téléchargé le code et les commentaires que j'ai ajoutés

<!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>

Copier après la connexion

Voir l'effet