Heim > Artikel > Web-Frontend > Reines CSS, um einen dynamischen Bar-Loading-Bar-Effekt zu erzielen (Quellcode beigefügt)

Reines CSS, um einen dynamischen Bar-Loading-Bar-Effekt zu erzielen (Quellcode beigefügt)

青灯夜游nach vorne: 2021-05-18 10:05:212329Durchsuche

In diesem Artikel erfahren Sie, wie Sie mit reinem CSS den dynamischen Balkenladebalkeneffekt erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Geben Sie mit dem Wissen über CSS-Variablen direkt den Code und die Kommentare ein, die ich hinzugefügt habe

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

Sehen Sie den Effekt

Sehr schön und reibungslos

Weitere Programmierkenntnisse finden Sie unter: Einführung in Programmieren ! !

Das obige ist der detaillierte Inhalt vonReines CSS, um einen dynamischen Bar-Loading-Bar-Effekt zu erzielen (Quellcode beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was bedeutet Auffüllen in CSS?Nächster Artikel：Was bedeutet Auffüllen in CSS?

In Verbindung stehende Artikel

Mehr sehen