Comment implémenter un carrousel d'images en utilisant du CSS pur

En CSS, vous pouvez utiliser des attributs d'animation et des règles @keyframes pour obtenir des effets de carrousel d'images. Utilisez simplement @keyframes pour créer d'abord l'animation ; puis utilisez l'attribut d'animation pour définir la durée, la vitesse et le nombre d'animations requises.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3

Préparez d'abord plusieurs images de même taille, et les images seront affichées horizontalement. Placées dans un conteneur d'images. Ajoutez un conteneur d'affichage en dehors du conteneur d'image. La taille du conteneur d'affichage est la taille de l'image. Ajoutez une animation personnalisée au conteneur d'image et définissez des valeurs de décalage incrémentielles à différentes étapes de l'animation.

L'effet d'animation est divisé en deux parties : la commutation et le maintien. L'étape d'animation personnalisée est liée au nombre d'images, et la valeur de décalage de chaque étape de l'animation est liée à la taille de l'image.

L'exemple dans cet article est de passer de la première image à la dernière image.

HTML

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

Rendu :

Analyse :

• La taille du conteneur d'affichage est la même que la taille de l'image
  

• Ajoutez un effet flottant à l'image sans avoir à prendre en compte le problème de marge gênant

• Comme l'exemple ne comporte que trois images, trois étapes d'animation sont ajoutées. Chaque étape obtient l'effet de commutation en définissant une valeur de marge gauche croissante ; définir La scène (par exemple : 35 % ~ 60 %) est la partie de séjour de l'animation, et le temps libre de l'étape précédente (par exemple : 25 % ~ 35 %) est la partie de commutation d'animation. La durée de chaque partie doit être définie. être contrôlé par vous-même.

• Étude recommandée : "

  Tutoriel vidéo CSS
"

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!