Maison > Article > interface Web > Exemples d'utilisation de CSS3 pour obtenir un effet carrousel d'images

Exemples d'utilisation de CSS3 pour obtenir un effet carrousel d'images

PHPzoriginal: 2023-04-06 16:44:561189parcourir

Avec le développement d'Internet, la conception Web accorde de plus en plus d'attention à l'expérience utilisateur. Les carrousels d'images sont également devenus un élément courant dans la conception de sites Web, en particulier dans les sites Web commerciaux, où les carrousels d'images sont devenus un moyen important d'afficher des informations telles que des produits, des marques, des événements, etc. Cet article explique comment utiliser CSS3 pour obtenir un effet carrousel d'images simple.

Structure HTML

Tout d'abord, nous devons préparer une structure HTML de base. Créez un conteneur dans la page et ajoutez plusieurs images à l'intérieur. Ici, nous utiliserons les balises ul et li pour créer une liste d'images pour le carrousel d'images, où chaque image est une balise li. Le code est le suivant :

<div class="slider">
  <ul>
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
</div>

Style CSS

Ensuite, nous devons utiliser CSS pour contrôler le style et les effets d'animation de la liste d'images. Tout d’abord, définissez ul sur un positionnement relatif afin que vous puissiez utiliser le positionnement absolu pour contrôler la position de la balise li.

.slider ul {
  position: relative;
  overflow: hidden;
}

Ensuite, définissez les balises li sur un positionnement absolu et définissez la largeur et la hauteur de chaque balise li.

.slider ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

Dans ce code, nous définissons également la transparence initiale de chaque balise li sur 0 et définissons un effet de transition pour rendre le changement d'image plus naturel.

Utilisez l'animation CSS3 pour créer un effet carrousel d'images

Après avoir préparé la structure HTML et le style CSS, nous pouvons commencer à utiliser l'animation CSS3 pour créer un effet carrousel d'images.

Tout d'abord, nous devons définir un temps de retard d'animation différent pour chaque balise li. Il s'agit de permettre à chaque image de rester pendant un certain temps avant que l'effet d'animation ne commence, créant ainsi un effet de carrousel visuel. Le code est le suivant :

.slider ul li:nth-child(1) {
  animation: bannermove 15s linear infinite 0s;
}

.slider ul li:nth-child(2) {
  animation: bannermove 15s linear infinite 5s;
}

.slider ul li:nth-child(3) {
  animation: bannermove 15s linear infinite 10s;
}

Dans le code ci-dessus, nous définissons une animation nommée "bannermove" pour chaque balise li, définissons une durée d'animation de 15 secondes, utilisons une animation linéaire, une boucle infinie et définissons un temps de retard différent (0 seconde , 5 secondes, 10 secondes) pour former un effet carrousel.

Ensuite, nous devons créer l'effet d'animation lui-même. Nous utiliserons les règles @keyframes pour définir les animations. Le code est le suivant :

@keyframes bannermove {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  28% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

Dans le code ci-dessus, nous avons divisé l'animation en cinq étapes. Le stade initial de 0 % est complètement transparent, devenant progressivement opaque jusqu'à atteindre le stade de 4 %, lorsque l'image est complètement visible. Puis, au stade 24%, l'image est toujours opaque et atteint un point culminant. Il devient ensuite progressivement opaque jusqu'à devenir totalement invisible au stade 28%, puis arrête l'animation au stade 100% et redevient totalement transparent.

Le code complet est le suivant :

<html>
<head>
<style>

.slider {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.slider ul {
  list-style-type: none;
  position: relative;
  overflow: hidden;
}

.slider ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;  
}

.slider ul li:nth-child(1) {
  animation: bannermove 15s linear infinite 0s;
}

.slider ul li:nth-child(2) {
  animation: bannermove 15s linear infinite 5s;
}

.slider ul li:nth-child(3) {
  animation: bannermove 15s linear infinite 10s;
}

@keyframes bannermove {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  28% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

</style>
</head>
<body>

<div class="slider">
  <ul>
    <li><img src="http://placekitten.com/400/400"></li>
    <li><img src="http://placekitten.com/g/400/400"></li>
    <li><img src="http://placekitten.com/400/400"></li>
  </ul>
</div>

</body>
</html>

Ce qui précède concerne l'utilisation de CSS3 pour implémenter un carrousel d'images. Nous pouvons ajuster le style du carrousel d’images et les effets d’animation selon les besoins pour obtenir la meilleure expérience utilisateur.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une brève analyse de plusieurs méthodes de définition des styles CSS dans jqueryArticle suivant：Une brève analyse de plusieurs méthodes de définition des styles CSS dans jquery

Articles Liés

Voir plus