Reines HTML+CSS, um einen Element-Ladeeffekt zu erzielen

Reines HTML+CSS, um einen Element-Ladeeffekt zu erzielen

Dies ist der Effekt der Element-UI-Ladekomponente. Sieht cool aus. Lass es uns implementieren!

analysieren

Die Animation besteht aus zwei Teilen:

Der blaue Bogen erstreckt sich von einem Punkt zu einem Kreis und schrumpft dann vom Kreis zu einem Punkt.

Der übergeordnete Knoten des Kreises rotiert mit dem Kreis

Code
html

<svg viewBox="25 25 50 50" Klasse="Box">
    <Kreis cx="50" cy="50" r="20" Füllung="keine" Klasse="Kreis"></Kreis>
</svg>

CSS
Standardstil

.Kasten {
    Höhe: 200px;
    Breite: 200px;
    Hintergrund: Weizen;
}
.Box .Kreis {
    Strichbreite: 2;
    Schlaganfall: #409eff;
    Strichlinienende: rund;
}

Fügen Sie Animationseffekte hinzu

/* Rotationsanimation */
@keyframes drehen {
    Zu {
        transformieren: drehen (1 Drehung)
    }
}
/* Bogenanimation */
/* 125 ist der Umfang des Kreises */
@keyframes Kreis {
    0% {
 /* Status 1: Punkt */
        Strich-Dasharray: 1 125;
        Strich-Dashoffset: 0;
    }
    50 % {
 /* Zustand 2: Kreis */
        Strich-Dasharray: 120, 125;
        Strich-Dashoffset: 0;
    }
    Zu {
 /* Zustand 3: Punkt (Schrumpfung in Drehrichtung) */
        Strich-Dasharray: 120 125;
        Strich-Schema-Höhepunkt: -125px;
    }
}
.Kasten {
  /* ...dasselbe wie oben*/
  Animation: 2 s rotieren, linear, unendlich;
}
.Kreis {
  /* ...dasselbe wie oben*/
  Animation: Kreis 2s unendlich;
}

Zum Schluss den Hintergrund entfernen

Online-Code-Demo https://jsbin.com/yarufoy/edit?html,css,output

Dies ist das Ende dieses Artikels darüber, wie man mit reinem HTML+CSS einen Elementladeeffekt erzielt. Weitere relevante Inhalte zum Erzielen des Ladens mit HTML+CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Beispielcode zur Implementierung der olympischen Ringe mit reinem HTML+CSS

>>:  Ausführliche Erläuterung der HTML-Grundlagen (Teil 1)

Artikel empfehlen

Super ausführliches Tutorial zur Installation von MySQL 8.0.23

Inhaltsverzeichnis Vorwort 1. Laden Sie MySQL von...

Verschönerung der Dualsystem-Boot-Schnittstelle für Win10 + Ubuntu20.04 LTS

Effektanzeige Die eingebaute Boot-Oberfläche ist ...

JavaScript-Grundlagen: Geltungsbereich

Inhaltsverzeichnis Umfang Globaler Umfang Funktio...

Vues Render-Funktion

Inhaltsverzeichnis 1. Knoten, Bäume und virtuelle...

Verwendung des Linux Dig-Befehls

Dig-Einführung: Dig ist ein Tool, das DNS einschl...

Verwendung des Linux-Datumsbefehls

1. Befehlseinführung Mit dem Datumsbefehl wird di...

So verwenden Sie Watch-Listener in Vue2 und Vue3

watch : auf Datenänderungen achten (Änderungserei...

Detaillierte Untersuchung des MySQL-Verbundindex

Ein zusammengesetzter Index (auch gemeinsamer Ind...

Analyse der Implementierung der MySQL-Anweisungssperre

Zusammenfassung: Analyse von zwei MySQL SQL-Anwei...

So stellen Sie das Crownblog-Projekt mit Docker in der Alibaba Cloud bereit

Front-End-Projektpaketierung Suchen Sie .env.prod...

Lösung für das Problem mit verstümmelten chinesischen MySQL-Zeichen

1. Die chinesischen verstümmelten Zeichen erschei...

CentOS verwendet expect, um Skripte und Befehle remote in Stapeln auszuführen

Manchmal müssen wir Server stapelweise bedienen, ...

Wie viele gängige Schleifen zur Array-Traversierung in JS kennen Sie?

Vorwort Als grundlegende Datenstruktur spielen Ar...