Beispiel für die Implementierung einer nahtlosen Endlosschleife im Hintergrund mithilfe einer CSS-Animation

1. Nachfrage

Ein Bild bewegt sich in einer Endlosschleife von links nach rechts

2. Code

Da es auf mobilen Geräten angewendet wird, werden REM-Einheiten verwendet und die folgenden Probleme treten auch hier auf.

HTML

<div Klasse="Hund"></div>

CSS

.Hund {
    Breite: 5,4rem; \\Bildbreite Höhe: 3,04rem; \\Bildhöhe Hintergrundbild: URL (head.jpg);
    Hintergrundgröße: 5,4rem 3,04rem; \\Bildbreite und -höhe Hintergrundposition: -5,4rem 0;
    Animation: 2 s linear und unendlich laufen lassen;
}

@keyframes ausführen {
    von {Hintergrundposition: -5,4rem 0;}
    zu {Hintergrundposition: 0 0;}
}

3. Problem

Auf dem PC gibt es kein Problem, aber auf der mobilen Seite (vielleicht aufgrund einer Neuberechnung der Schriftgröße?) werden Sie feststellen, dass die Bewegungsgeschwindigkeit nicht mit den Einstellungen übereinstimmt und das Bild nicht nahtlos sein kann.

4. Gründe

Unbekannt, keine relevanten Informationen gefunden. Es scheint, dass das Problem durch die dynamische Berechnung der Schriftgröße verursacht wird.

5. Lösung

Nach dem Testen stellte sich heraus, dass es normal ist, dem Bild nach dem Laden der Datei eine Animation hinzuzufügen. Ändern Sie also den Code:

JS

$(Dokument).bereit(Funktion(){
  remReSize();
  setzeTimeout(Funktion() {
    $('.dog').css('Animation', '2 s linear unendlich laufen lassen');
  }, 0);
});

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.