Um das Benutzererlebnis zu verbessern, wird beim Laden von Netzwerkdaten normalerweise eine Ladeanimation verwendet, die sich im Kreis dreht, oder ein Skeleton-Bildschirm. Im Vergleich zur Ladeanimation wirkt Skeleton Screen lebendiger und ist zudem sehr einfach zu implementieren. Sie können einen einfachen Skelettbildschirm mithilfe von CSS implementieren. (Was ist Skeleton Screen?)
Empfohlenes Lernen: CSS-Video-Tutorial, CSS-Tutorial (Bilder und Text)
HTML-Skelett
CSS plus Stil
CSS plus Animation
Die Skelettstruktur ist sehr einfach. Platzieren Sie einfach nach dem Zufallsprinzip ein paar Elemente auf Blockebene, die Ihnen gefallen, und schon ist es in Ordnung.
<p class='screen-root'> <ul> <li/> <li/> <li/> </ul></p>
Sehen Sie, so einfach ist das.
Der Skelettbildschirm, den wir oft sehen, sieht so aus
Zur Vereinfachung der Beschreibung: zu Um den Kontrast zu verbessern, werde ich zunächst eine Geisterversion von
erstellen. Verwenden Sie zunächst das linear-gradient-Attribut von CSS, um einen roten Farbverlauf zu zeichnen mit einem kleinen grünen Bild und füllen Sie es als Hintergrund für das li-Tag
linear-gradient(), um ein mehrfarbiges lineares Farbverlaufsbild zu erstellen. Sie können hier sehen
li{ background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%); width: 100%; height: 0.6rem; list-style: none;
}
Ändern Sie bei der tatsächlichen Verwendung die Verlaufskarte in eine normale Farbe, wie zum Beispiel:
background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)
Das Einzige, was Sie noch tun müssen, ist, das Grün in der Mitte zu bewegen
Können Sie sich eine Möglichkeit vorstellen? es bewegen?
Hier wird das Hintergrundbild gedehnt, der Prozentsatz der Hintergrundpositionierung dynamisch festgelegt, die Hintergrundpositionierung geändert und die verschiedenen Versatzwerte des Bildes relativ zum Container berechnet, wodurch Folgendes erreicht wird der Animationseffekt.
li{ background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%); width: 100%; height: 0.6rem; list-style: none; background-size: 400% 100%; background-position: 100% 50%; animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
0% { background-position: 100% 50%;
}
100% { background-position: 0 50%;
}
}Hier werden zwei Werte für das background-position-Attribut festgelegt. Der erste Wert stellt den Versatz der horizontalen Position relativ zum Container dar, und der zweite Wert stellt den Versatz der vertikalen Position relativ zum dar Container.
Wenn Sie den Prozentsatz zum Festlegen des background-position-Werts verwenden, wird eine Formel zur Berechnung des tatsächlichen Positionierungswerts (container width - image width) * (position x%) = (x offset value) ausgeführt, d. h. der Breitenunterschied zwischen dem Container und dem Bild wird mit dem eingestellten Prozentsatz multipliziert Positionierungswert, und das Ergebnis ist der tatsächliche Versatz. Durch das Verschieben des Werts wird die Breite von background-size unter anderem auf 400 % festgelegt, um einen Breitenunterschied zum Container zu erzeugen.
Einige Schüler fragen sich vielleicht, dass das Festlegen des background-size-Werts auf 50 % auch zu einem Breitenunterschied zum Container führen kann. Ja, aber auf diese Weise deckt das Hintergrundbild den gesamten Container ab und Sie werden überrascht sein, dass der grüne Punkt zu einem Doppelpunkt wird.
Sie können versuchen, verschiedene Werte für die Hintergrundgröße festzulegen, die Leistung zu beobachten und darüber nachzudenken, warum dies geschieht.
Schließlich verwenden Sie eine Keyframe-Animation, um den Wert von background-position an der x-Koordinate von 100% bis 0%
@keyframes skeleton-loading {
0% { background-position: 100% 50%;
}
100% { background-position: 0 50%;
}
} festzulegen. Nehmen Sie an, dass die Breite des Containers , dann beträgt die Breite des Hintergrunds 100px Unter Verwendung der obigen Formel beträgt der tatsächliche Versatz des Hintergrundbilds relativ zum Container im ersten Frame der Animation 400px
(100px-400px)*100% = -300px
(100px-400px)*0% = 0
auf -300px ändert. 0
Weitere verwandte Tutorial-Empfehlungen: „Einführung in das PHP-Programmier-Tutorial“
Das obige ist der detaillierte Inhalt vonImplementieren Sie einen einfachen Skelettbildschirm mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
