Comment implémenter un graphique carrousel en CSS3 ? Comment implémenter des images de carrousel en CSS3

Nous voyons souvent un emplacement sur une page Web où de nombreuses images alternent. Il s'agit de l'image du carrousel. L'apparence de l'image du carrousel permet d'afficher des informations importantes à un seul endroit. Comment y parvient-on ? Le graphique carrousel peut être réalisé avec js ou css. Cet article vous présentera comment obtenir l'effet de graphique carrousel avec CSS3.

CSS3 peut utiliser les propriétés d'animation CSS3 et les règles @keyframes pour implémenter des effets de carrousel.

l'animation se compose principalement de deux parties pour obtenir des effets d'animation :
1 Déclarez une animation via des images similaires à celles de l'animation Flash
2. Appelez l'animation déclarée par les images clés dans l'attribut d'animation ; .

L'attribut d'animation est un attribut abrégé (cours vidéo recommandé : tutoriel CSS)

Syntaxe : animation : nom durée timing-fonction retard itération-compte direction.

La valeur de l'attribut d'animation ne sera pas introduite ici. Si nécessaire, vous pouvez vous référer au manuel css.

Jetons un coup d'œil à un exemple :

html :

<div id="container">
    <div id="photo">
        <img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" />
        <img src="http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg" />
        <img src="http://img.zcool.cn/community/01c60259ac0f91a801211d25904e1f.jpg@1280w_1l_2o_100sh.jpg" />
    </div>
</div>

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

Remarque :

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

Ajoutez un effet flottant à l'image, sans avoir à considérer le problème de marge gênant

Depuis le L'exemple n'a que trois images, ajoutez-le. Il y a trois étapes d'animation, chaque étape obtient l'effet de commutation en définissant une valeur de marge gauche croissante

L'étape d'animation définie (telle que : 35 % ~ 60 %) est la demeurer une partie de l'animation, qui est la même que la précédente. Le temps libre de la scène (par exemple 25 % ~ 35 %) est la partie de changement d'animation. La durée de chaque partie doit être contrôlée par vous-même.

Cet article présente brièvement l'implémentation de l'effet carrousel CSS. Pour plus d'informations sur l'effet du carrousel CSS, vous pouvez consulter le Téléchargement des effets spéciaux sur le site Web PHP chinois.

Recommandations associées :

CSS3 pour implémenter des images de carrousel simples

Implémentation de la fonction de carrousel d'images Bootstrap

jQuery implémente l'effet de diaporama de carrousel d'images

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!