CSS zum Erzielen des Skeleton Screen-Effekts

Beim Laden von Netzwerkdaten wird zur Verbesserung des Benutzererlebnisses normalerweise eine kreisförmige Ladeanimation oder ein Skeleton Screen als Platzhalter verwendet. Im Vergleich zur Ladeanimation ist der Skeleton Screen-Effekt lebendiger und einfacher umzusetzen. Ein einfacher Skeleton-Screen kann mit CSS implementiert werden.

Ideen

• HTML-Skelett
• CSS-Stil
• CSS plus Animation

Beginnen Sie mit dem Aufbau des Skeletts

Die Skelettstruktur ist sehr einfach, fügen Sie einfach ein paar beliebige Blockelemente darin ein.

<div Klasse='Bildschirm-Wurzel'>
  <ul>
    <li/>
    <li/>
    <li/>
  </ul>
</div>

Sie sehen, so einfach ist es.

CSS-Farbgebung

Der Skelett-Bildschirm, den wir oft sehen, sieht so aus

Um die Beschreibung zu erleichtern und den Kontrast zu erhöhen, werde ich zunächst eine Ghost-Version erstellen

Verwenden Sie zunächst die CSS-Eigenschaft linear-gradient , um ein Verlaufsbild mit einem Hauch von Grün in Rot zu zeichnen, und verwenden Sie es als Hintergrundfüllung für li

Etikett

linear-gradient() kann ein lineares Farbverlaufsbild mit mehreren Farben erstellen. Weitere Informationen finden Sie hier

li{
    Hintergrundbild: linearer Farbverlauf (90 Grad, #ff0000 25 %, #41de6a 37 %, #ff0000 63 %);
    Breite: 100 %;
    Höhe: 0,6rem;
    Listenstil: keiner;
} 

Ersetzen Sie bei der tatsächlichen Verwendung das Verlaufsbild durch eine normale Farbe, z. B.: background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)

Bringen Sie Bewegung ins Spiel

Jetzt muss nur noch das Grün in der Mitte animiert werden

Fällt Ihnen eine Möglichkeit ein, es in Bewegung zu versetzen?

Hier werden die Funktionen zum Strecken des Hintergrundbilds, zum dynamischen Festlegen des Prozentsatzes der Hintergrundpositionierung und zum Ändern der Hintergrundpositionierung verwendet, wodurch die unterschiedlichen Versatzwerte des Bildes relativ zum Container berechnet werden, um den Animationseffekt zu erzielen.

li{
    Hintergrundbild: linearer Farbverlauf (90 Grad, #ff0000 25 %, #41de6a 37 %, #ff0000 63 %);
    Breite: 100 %;
    Höhe: 0,6rem;
    Listenstil: keiner;
    Hintergrundgröße: 400 % 100 %;
    Hintergrundposition: 100 % 50 %;
    Animation: Skelett-Laden, 1,4 s, unendlich;
}

@keyframes Skelett-Laden {
  0% {
    Hintergrundposition: 100 % 50 %;
  }
  100 % {
    Hintergrundposition: 0 – 50 %;
  }
}

Hier werden zwei Werte für background-position festgelegt. Der erste Wert stellt den horizontalen Versatz relativ zum Container dar und der zweite den vertikalen Versatz relativ zum Container.

Wenn Sie einen Prozentsatz verwenden, um background-position festzulegen, wird eine Formel ausgeführt, um den tatsächlichen Positionierungswert zu berechnen (container width - image width) * (position x%) = (x offset value) wird mit dem festgelegten prozentualen Positionierungswert multipliziert. Das Ergebnis ist der tatsächliche Versatzwert. Einer der Zwecke der Festlegung background-size auf 400 % besteht darin, einen Breitenunterschied zum Container zu erzeugen.

Einige Studierende fragen sich möglicherweise, ob durch die Festlegung background-size auf 50 % auch ein Breitenunterschied zum Container entstehen kann. Ja, aber auf diese Weise wird das Hintergrundbild den gesamten Container kacheln und Sie werden überrascht sein, dass der grüne Punkt doppelt vorhanden ist.

Sie können versuchen, unterschiedliche Werte für die Hintergrundgröße festzulegen, das Verhalten zu beobachten und darüber nachzudenken, warum dies geschieht.

Verwenden Sie abschließend die Keyframe-Animation, um background-position an der x-Koordinate von 100% auf 0% zu setzen.

@keyframes Skelett-Laden {
  0% {
    Hintergrundposition: 100 % 50 %;
  }
  100 % {
    Hintergrundposition: 0 – 50 %;
  }
}

Angenommen, die Containerbreite beträgt 100px , dann beträgt die Breite des Hintergrundbilds 400px . Mit der obigen Formel beträgt der tatsächliche Wert des Hintergrundbildversatzes im ersten Frame der Animation relativ zum Container

(100px-400px)*100% = -300px

Der tatsächliche Offset des letzten Frames

(100px-400px)*0% = 0

Bei der Animation handelt es sich eigentlich um den Prozess eines linearen Hintergrundbilds, das dreimal so breit ist wie der Container und dessen Versatz relativ zum Container sich von -300px auf 0 ändert.

Zusammenfassen

Dies ist das Ende dieses Artikels zur Implementierung von Skeleton Screen mit CSS. Weitere Informationen zur Implementierung von Skeleton Screen mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!