CSS réalise un effet carrousel (avec code)

CSS pour obtenir un effet carrousel (avec code)

Base théorique

Propriétés d'animation CSS3 et règles @keyframes

Idée principale

1 Préparer plusieurs images de la même taille

2 , Disposez les images à afficher horizontalement dans un conteneur d'images

3. 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

4. Ajouter animation personnalisée dans le conteneur d'images, 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 basculement de la dernière image à la première image dans l'exemple de cet article. Une idée est de passer de la dernière image à la première image. un par un

HTML

<p id="container">
    <p id="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </p>
</p>

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. Le conteneur d'images est 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 :

1. La taille du conteneur d'affichage est cohérente avec la taille de l'image

2. effet sur l'image. Il n'est pas nécessaire de prendre en compte le problème de marge gênant

3. Étant donné que l'exemple ne comporte que trois images, trois étapes d'animation sont ajoutées pour obtenir l'effet de commutation en définissant une marge gauche croissante. valeur

4. L'étape d'animation définie (par exemple : 35 % ~ 60 %) est la partie d'animation restante, et le temps libre de l'étape précédente (par exemple : 25 % ~ 35 %) est l'animation. pièce de commutation. La longueur de chaque pièce doit être contrôlée par vous-même

Effet de fonctionnement

Merci d'avoir lu, je. j'espère que vous en bénéficierez beaucoup.

Cet article est reproduit à partir de : https://blog.csdn.net/u011848617/article/details/80468463

Tutoriel recommandé : "Tutoriel 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!