Wie kann ich CSS verwenden, um einen reibungslosen Wiedergabetasteffekt von Bildsequenzen zu erzielen?

Wie erstelle ich einen sanften Bildsequenz -Wiedergabel -Effekt?

Viele Anwendungsszenarien erfordern eine simulierte Video -Wiedergabe, aber das Material ist kein Video, sondern mehrere Bilder. Der direkte Austausch des Bildpfades kann aufgrund der Unterschiede in der Bildlastzeit leicht einen schwarzen Bildschirm oder eine Verzögerung verursachen. Dieser Artikel bietet eine effiziente und glatte Lösung.

Einfaches Laden von Bildern nacheinander ist anfällig für Verzögerungen, daher verwenden wir eine bessere Lösung: Spleißen Sie alle Bilder in ein großes Bild. Unter der Annahme, dass die Bilder gleich groß sind, spleifen Sie sie horizontal in ein langes Bild. Verwenden Sie dann das background-position von CSS und @keyframes -Animation, um den Offset des Hintergrundbildes zu steuern, um eine Bildschaltung zu erzielen.

Zum Beispiel gibt es drei 500 x 300 Pixelbilder, und nach dem Nähen erhalten wir ein langes Bild von 1500 x 300 Pixel. Der folgende CSS -Code implementiert Bildschleifewiedergabe:

 .Container {
  Breite: 500px;
  Höhe: 300px;
  Hintergrund: URL ("geteiltes Bild") Links / Auto 100% No-Repeat;
  Animation: Playback -Zeitschritte spielen (3, Start) 0s Infinite; / * Schritte (Anzahl der Bilder, Start) */
}

@keyframes spielen {
  0% {Hintergrundposition: 0 0; } /* Foto 1* /
  33,3% {Hintergrundposition: -500px 0; } /* Foto 2* /
  66,7% {Hintergrundposition: -1000px 0; } /* Foto 3* /
  100% {Hintergrundposition: 0 0; } /* Zurück zum ersten Bild* /
}

Im Code definiert .container die Containergröße, background Hintergrundeigenschaft legt das genähte Bild als Hintergrund fest, und animation definiert die Wiedergabebackanimation. steps(3, start) stellt sicher, dass das Bild Schritt für Schritt umgeschaltet ist und infinite unendliche Schleife bedeutet. background-position steuert den Anzeigebereich. Der Schlüssel ist, den Versatz jedes Bildes genau zu berechnen und in @keyframes zu schreiben. Die Wiedergabendauer wird nach der Anzahl der Bilder und der erforderlichen Geschwindigkeit eingestellt. Diese Methode ist einfach und effizient, um das Verzögerungsproblem beim Laden voneinander zu vermeiden und eine sanfte Bildsequenzwiedergabe zu erreichen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS verwenden, um einen reibungslosen Wiedergabetasteffekt von Bildsequenzen zu erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!