Comment jouer des séquences d'image en douceur avec l'animation CSS?

Comment utiliser l'animation CSS pour réaliser la lecture de séquence d'images lisses?

De nombreuses scènes nécessitent des effets de lecture vidéo simulés, mais le matériel est une séquence d'images. La méthode de remplacement directement du chemin d'image est inefficace et est sujette à l'écran noir ou à la confusion causée par le retard de chargement. Cet article fournit une solution basée sur l'animation CSS pour éviter efficacement de tels problèmes.

Précharger toutes les images n'est pas la meilleure solution, surtout lorsque le nombre d'images est énorme, les coûts de gestion et de chargement sont trop élevés.

Une meilleure stratégie consiste à épisser les images dans une longue image. En supposant que toutes les images sont de la même taille (par exemple, 500x300 pixels), épissez les trois images horizontalement en une longue image de 1500x300 pixels. Utilisez background-position de CSS et @keyframes pour simuler la lecture d'image.

L'exemple de code CSS suivant:

 .Container {
  Largeur: 500px;
  hauteur: 300px;
  Contexte: URL ("Image divisée") gauche / auto 100% sans répétition;
  Animation: jouer des étapes de durée d'animation (1, démarrage) 0s infinie normale Aucun;
}

@keyframes play {
  de {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 * /
  à {position de fond: 0 0; } / * Revenez à la première image, jouez-le en boucle * /
}

Dans le code, .container définit le conteneur et l'image d'arrière-plan est une longue image de la couture. animation définit le play d'animation, steps(1, start) garantit que l'animation est lue étape par étape, et动画时长doit être ajustée en fonction du nombre d'images et de la vitesse de lecture. background-position contrôle la zone d'affichage et change des images en modifiant sa valeur. Le pourcentage des keyframes doit être ajusté en fonction du nombre et de la taille de l'image, et l'heure d'affichage de chaque image est contrôlée avec précision.

Cette méthode évite de charger une par une, améliore la maîtrise de la lecture et rend le code simple et facile à comprendre. La prémisse est que toutes les images sont de la même taille. Si la taille est incohérente, le prétraitement doit être effectué à l'aide de toile ou d'autres techniques de traitement d'image.

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!