Comment utiliser CSS3 pour obtenir des effets de rotation automatique des images (code complet ci-joint)

Cet article présente comment utiliser CSS3 pour réaliser l'effet carrousel des images et se concentre sur les étapes spécifiques. Le contenu de cet article est compact et j'espère que tout le monde pourra y gagner quelque chose.

Lorsque vous naviguez sur le Web, vous rencontrerez un effet spécial appelé carrousel d'images : différentes images situées à la même position seront jouées en boucle en fonction des changements dans le temps, obtenant une sorte de diaporama similaire à l'effet. Alors, comment implémenter des effets de carrousel d’images pendant le développement Web ? Cet article vous montrera comment utiliser CSS3 pour obtenir des effets de carrousel d'images.

L'idée principale d'utiliser CSS3 pour obtenir des effets de carrousel

Nous préparerons plusieurs images de la même taille dans le même emplacement, et placez-le horizontalement dans le conteneur div, puis définissez un conteneur d'affichage au-dessus du conteneur div, où la taille du conteneur d'affichage est la même que la taille de l'image. Enfin, 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.

Remarque

L'effet d'animation est divisé en deux parties : la commutation et le maintien.

La valeur de décalage de l'animation est liée à la taille de l'image.

Le principe d'utilisation du CSS3 pour implémenter des effets de carrousel

Tout d'abord, vous devez vous assurer que la taille du conteneur d'affichage est la même que la taille de l'image, puis ajoutez un effet flottant, puis déterminez le nombre d'images à insérer et définissez les étapes d'animation pour chaque image, chaque étape obtenant l'effet de commutation en utilisant des images clés pour définir des valeurs de marge gauche croissantes.

Étapes (code) pour utiliser CSS3 pour implémenter des effets de carrousel d'images

Étape 1 : Ajouter des images à l'aide de HTML

<div id="container">
    <div id="photo">
        <img  src="1.png" / alt="Comment utiliser CSS3 pour obtenir des effets de rotation automatique des images (code complet ci-joint)" >
        <img  src="2.png" / alt="Comment utiliser CSS3 pour obtenir des effets de rotation automatique des images (code complet ci-joint)" >
        <img  src="3.png" / alt="Comment utiliser CSS3 pour obtenir des effets de rotation automatique des images (code complet ci-joint)" >
    </div>
</div>

Étape 2 : Utilisez CSS3 pour préparer le terrain de l'animation

#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;
}
}

Pour obtenir l'effet de carrousel d'images

Des codes d'effets spéciaux CSS3 et javascript plus sympas sont disponibles sur : collection d'effets spéciaux js

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!