Einzelelementlader: die Punkte

In diesem Artikel werden das Erstellen von Ladeanimationen mithilfe eines einzelnen Div -Elements erstellt. Wir haben den Spinnlader bereits zerlegt. Lassen Sie uns nun eine weitere vertraute Animation angehen: die Punkte .

Punktlader sind allgegenwärtig. Ihre Anziehungskraft liegt in ihrer Einfachheit: drei Punkte, die einer Textelipsis (…) ähneln und eine dynamische visuelle Sequenz durchführen.

Serienübersicht

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

Unser Ziel ist es, diese Animation nur mit einem DIV zu replizieren, wodurch die Notwendigkeit einzelner Divs pro Punkt oder separate Animationen beseitigt wird. Das obige Beispiel erreicht dies unter Verwendung eines einzelnen DIV, CSS und ohne Pseudoelemente, wodurch Hintergrund- und Masken-Techniken kombiniert werden. Die Illusion von farbveränderten Punkten wird durch Animieren eines Hintergrundgradienten erstellt.

Den Hintergrund animieren

Beginnen wir mit der Hintergrundanimation:

 .loader {
  Breite: 180px;
  Aspektverhältnis: 8/5;
  Hintergrund: 
    Konikatiker (rot 50%, Blau 0) No-Repeat, 
    Konikatiker (grün 50%, lila 0) No-Repeat;
  Hintergrundgröße: 200% 50%; 
  Animation: Rückseite 4S Infinite Linear;
}

@keyframes zurück {
  0%, 100% {Hintergrundposition: 0% 0%, 0% 100%; }
  25% {Hintergrundposition: 100% 0%, 0% 100%; }
  50% {Hintergrundposition: 100% 0%, 100% 100%; }
  75% {Hintergrundposition: 0% 0%, 100% 100%; }
}

Das 180px-weite .loader Element zeigt zwei Conic-Gradienten mit scharfen Farbübergängen an. Die obere Hälfte verwendet rot und blau, die untere Hälfte grün und lila. Die 200% Breite sorgt dafür, dass jeweils nur eine Farbe in jeder Hälfte sichtbar ist. Die Animation radelt durch Positionen und erzeugt die Illusion der Farbänderung.

Für ein tieferes Verständnis der background-position finden Sie diese Antwort über den Stapelüberlauf . Die Animation manipuliert geschickt die X- und Y -Koordinaten der Gradienten.

Warum conic-gradient() statt linear-gradient() ?

Die Verwendung von conic-gradient() ist prägnanter und erzielt das gleiche Ergebnis.

Indem wir die Zeitversorgungsfunktion der Animation von linear auf steps(1) einstellen, eliminieren wir das Farbblitz.

Erstellen der Punkte

Wie im vorherigen Artikel verwenden wir CSS -Masken . Mit Masken können wir selektiv Teile eines Hintergrunds aufdecken. Hier erstellen wir Punkte und enthüllen die Hintergrundgradienten durch sie.

Wir werden radial-gradient() einstellen:

 .loader {
  / * ... vorherige Stile ... */
  --_ G: Radialgradient ( #000 68%, #0000 71%) No-Repeat;
  Maske: var (--_ g), var (--_ g), var (--_ g);
  Maskengröße: 25% 40%;
}

Eine CSS -Variable, --_g , vereinfacht den Code. Drei radiale Gradienten erzeugen die Punkte.

Jetzt brauchen wir eine Animation, um die Punkte zu bewegen:

 .loader {
  / * ... vorherige Stile ... */
  Animation: 2S unendlich laden;
}

@keyframes laden {
  0%, 100% {Maskenposition: 0% 0%, 50% 0%, 100% 0%; }
  16,67% {Maskenposition: 0% 100%, 50% 0%, 100% 0%; }
  33,33% {Maskenposition: 0% 100%, 50% 100%, 100% 0%; }
  50% {Maskenposition: 0% 100%, 50% 100%, 100% 100%; }
  66,67% {Maskenposition: 0% 0%, 50% 100%, 100% 100%; }
  83,33% {Maskenposition: 0% 0%, 50% 0%, 100% 100%; }
}

Diese Animation passt die Y-Koordinate der mask-position jedes Punktes an und erzeugt die Auf- und Abbewegung. Das Kombinieren mit der Gradientenanimation erzeugt den endgültigen Effekt.

Variationen und weitere Beispiele

Die CSS -Variable ermöglicht einfache Farb- und Größenanpassungen. Durch Ändern der Schlüsselframes können auch verschiedene Animationen erstellt werden. Weitere Beispiele, einschließlich eines Laders mit einem Punkt und eines Blobby-Effekt-Laders, sind hier verfügbar. Ein CSS -Gitteransatz wird ebenfalls gezeigt, was die Größe und Positionierung vereinfacht.

Schlussfolgerung und nächste Schritte

Dieser Artikel hat gezeigt, dass DOT -Lader mit einem einzigen Div erstellt werden. Der nächste Artikel behandelt Barlader und baut auf den hier erlernten Techniken auf.

Serienübersicht

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

(Denken Sie daran, https://www.php.cn/link/9fc36fa768a74fa93d3ee7bf57b1392c und https://www.php.cn/link/0c6ba56676353996dff5efb2b7789e1e .

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