Maison > Article > interface Web > Comment utiliser CSS pour obtenir un effet carrousel d'images ? (exemple de code)
Cet article vous présentera comment obtenir un effet carrousel d'images avec CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
[Tutoriel recommandé : Tutoriel vidéo CSS]
Base théorique
CSS3 propriétés d'animation et règles @keyframes
Idée principale
Préparer plusieurs images de la même taille
Disposez les images à afficher horizontalement dans un conteneur d'images
Ajoutez un conteneur d'affichage à l'extérieur du conteneur d'images, et la taille du conteneur d'affichage est la taille de l'image
Ajoutez une animation personnalisée au conteneur d'images et définissez des valeurs de décalage incrémentielles à différentes étapes de l'animation
Notes
L'effet d'animation est divisé en deux parties : basculer et rester
L'étape d'animation personnalisée est liée au nombre d'images
La valeur de décalage de chaque étape de l'animation est liée à la taille de l'image.
Il n'y a pas d'effet de commutation de la dernière image à la première image dans l'exemple dans cet article. Une idée est de passer de la dernière image à la première image une par une
HTML
<div id="container"> <div id="photo"> <img src="1.png" /> <img src="2.png" /> <img src="3.png" /> </div> </div>
Analyse :
Trois éléments img sont créés ici. À l'extérieur de l'élément img se trouve un conteneur d'image et à l'extérieur du conteneur d'image se trouve un conteneur d'affichage.
CSS
#container { width: 400px; height: 300px; overflow: hidden; } #photo { width: 1200px; animation: switch 5s ease-out infinite; } #photo > img { float: left; width: 400px; height: 300px; } @keyframes switch { 0%, 25% { margin-left: 0; } 35%, 60% { margin-left: -400px; } 70%, 100% { margin-left: -800px; } }
Analyse :
Effet de fonctionnement
Pour plus de connaissances liées à la programmation, veuillez visiter :Vidéo de programmation ! !
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!