Einzelelementlader: die Balken

In diesem Artikel wird das Erstellen von Ladeanimationen unter Verwendung von Balken untersucht, wobei der Einzelelementansatz und flexible CSS-Techniken in früheren Artikeln verwendet werden, die sich auf Spinner und Punkte konzentrieren. Wir werden zahlreiche Variationen mit minimalen Codeänderungen generieren und die Leistung von CSS nutzen.

Serienübersicht

• Einzelelementlader: der Spinner
• Einzelelementlader: die Punkte
• Einzelelementlader: Die Balken - aktueller Artikel
• Einzelelementlader: 3D gehen

Lassen Sie uns in Beispiele für 20 -bar -Lader eintauchen. Während dies entmutigend erscheint, teilen alle Beispiele dieselbe Codestruktur, wobei Variationen durch einfache Werteinstellungen erreicht werden. Der Fokus liegt nicht darauf, einen bestimmten Lader zu erstellen, sondern auf Mastering -Techniken, um unzählige Variationen von einem einzelnen Basiscode zu generieren.

Die Stangen konstruieren

Wir beginnen mit der Definition von Dimensionen mithilfe von width (oder height ) und aspect-ratio um Proportionen aufrechtzuerhalten:

 .bars {
  Breite: 45px;
  Aspektverhältnis: 1;
}

Wir simulieren drei Balken mit einem linearen Gradientenhintergrund - einer Methode, die den Punktladern in Teil 2 ähnelt.

 .bars {
  Breite: 45px;
  Aspektverhältnis: 1;
  --C: No-Repeat Linear-Gradient (#000 0 0); / * Farbe definieren *//
  Hintergrund: 
    var (-c) 0% 50%,
    var (-c) 50% 50%,
    var (-c) 100% 50%;
  Hintergrundgröße: 20% 100%; / * 20% * (3 Balken 2 Leerzeichen) = 100% *//
}

Dies schafft eine Drei-Tanne-Struktur. In diesem Artikel wird die Manipulation des Hintergrunds stark verwendet. Wenn Sie sich also auf frühere Artikel oder die verknüpfte Stapelüberlaufantwort beziehen, werden bei Bedarf detailliertere Erklärungen enthält.

Die Bars animieren

Die Animation wird erreicht, indem entweder die Größe oder Position des Elements geändert wird. Lassen Sie uns die Größe mit Keyframes animieren:

 @keyframes laden {
  0% {Hintergrundgröße: 20% 100%, 20% 100%, 20% 100%; }
  33% {Hintergrundgröße: 20% 10%, 20% 100%, 20% 100%; }
  50% {Hintergrundgröße: 20% 100%, 20% 10%, 20% 100%; }
  66% {Hintergrundgröße: 20% 100%, 20% 100%, 20% 10%; }
  100% {Hintergrundgröße: 20% 100%, 20% 100%, 20% 100%; }
}

Die Keyframes passen die background-size jedes Gradientensegments über die Dauer der Animation an.

Alternativ liefert das Fixieren der Größe auf 20% 50% und das Animieren der Positionen unterschiedliche Ergebnisse:

 .loader { / * ... vorherige Stile ... * /
  Animation: 1S infinite linear laden;
}
@keyframes laden {
  / * ... Animation Keyframes positionieren ... */
}

Durch die Manipulation von Größe und Position sind unzählige Lader -Variationen möglich. Komplexere Gradienten erweitern die Designoptionen weiter. Die meisten Beispiele in der Demo verwenden das gleiche Markup und die gleichen Stile, die sich nur in Animationskombinationen unterscheiden.

Verbesserung mit fortschrittlichen Techniken

Die Maskierungstechnik aus dem Punkt -Artikel kann hier angewendet werden. Das Ersetzen background-* Eigenschaften durch mask-* und Hinzufügen eines Gradienten erzeugt visuell ansprechende Lader. Die Kerntechnik bleibt zwischen Punkten und Balken konsistent: Gradienten definieren Formen, Animation modifiziert Größe/Position und Masken fügen Farbe hinzu.

Runden der Stangen

Ein anderer Ansatz verwendet das ::before und ::after Pseudoelementen, um drei abgerundete Balken zu erstellen:

 .loader { / * ... Stile verwenden CSS -Variablen für Größe und Position ... * /}

Ein kontinuierlicher Gradienteneffekt wird simuliert, indem einzelne Gradienten in jedem Element sorgfältig positioniert werden. Das Animieren der Höhe mit Verzögerungen erzeugt verschiedene Animationen.

Abschluss

Dieser Artikel zeigt die Vielseitigkeit, komplexe Ladeanimationen mit minimalem Code zu erstellen. Durch die Kombination einzelner Elemente, Gradienten, Pseudoelemente und Animation ist eine Vielzahl von Ladeanimationsdesigns erreichbar. Die bereitgestellten Beispiele und Techniken fördern das Experimentieren und die Schaffung einzigartiger, visuell ansprechender Lader.

Das obige ist der detaillierte Inhalt vonEinzelelementlader: die Balken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!