Comment utiliser CSS pour obtenir l'effet de lecture en douceur des séquences d'images?

Comment créer un effet de lecture de séquence d'image en douceur?

De nombreux scénarios d'application nécessitent une lecture vidéo simulée, mais le matériel n'est pas une vidéo, mais plusieurs images. Le remplacement direct du chemin d'image peut facilement provoquer un écran ou un retard noir en raison des différences de temps de chargement de l'image. Cet article fournit une solution efficace et fluide.

Le chargement simple des images un par un est sujet aux retards, nous adoptons donc une meilleure solution: épisser toutes les images en une grande image. En supposant que les images sont de la même taille, épissez-les horizontalement dans une longue image. Ensuite, utilisez l'attribut background-position de CSS et @keyframes Animation pour contrôler le décalage de l'image d'arrière-plan pour obtenir la commutation d'image.

Par exemple, il y a trois images de 500x300 pixels, et après les coutures, nous obtenons une longue image de 1500x300 pixels. Le code CSS suivant implémente la lecture de boucle d'image:

 .Container {
  Largeur: 500px;
  hauteur: 300px;
  Contexte: URL ("Image divisée") gauche / auto 100% sans répétition;
  Animation: jouer des pas de temps de lecture (3, start) 0s Infinite; / * étapes (nombre d'images, start) * /
}

@keyframes play {
  0% {Position d'arrière-plan: 0 0; } / * Photo 1 * /
  33,3% {Position d'arrière-plan: -500px 0; } / * Photo 2 * /
  66,7% {position de fond: -1000px 0; } / * Photo 3 * /
  100% {position de fond: 0 0; } / * Retour à la première image * /
}

Dans le code, .container définit la taille du conteneur, background définit l'image cousue comme l'arrière-plan et animation définit l'animation de lecture. steps(3, start) garantissent que l'image est commutée étape par étape, et infinite signifie une boucle infinie. background-position contrôle la zone d'affichage. La clé est de calculer avec précision le décalage de chaque image et de l'écrire dans @keyframes . La durée de lecture est ajustée en fonction du nombre d'images et de la vitesse requise. Cette méthode est simple et efficace, en évitant le problème de retard du chargement un par un et en réalisant la lecture de séquence d'image en douceur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!