Comment implémenter un graphique carrousel en utilisant du CSS3 pur

Avant-propos

Par rapport à l'effet carrousel contrôlé par JavaScript, l'effet carrousel obtenu par CSS3 pur est beaucoup plus simple et plus efficace, mais la fonction est également plus unique. Seul le carrousel ne peut pas être commuté manuellement.

Qu'est-ce qui est utilisé pour y parvenir ? Mise en page + animation animation

Partie HTML

<p class="container">
    <p class="title-container">
      <h1>纯CSS3轮播图</h1>
    </p>
    <p class="slide-box">
      <ul>
        <li class="slide-item slide1">
          <a href="#">
          <img src="images/img-1.jpg" alt="">
          <p class="tooltip">
            生活          </p>
          </a>
        </li>
        <li class="slide-item slide2">
          <a href="#">
          <img src="images/img-2.jpg" alt="">
          <p class="tooltip">
            热情          </p>
          </a>
        </li>
        <li class="slide-item slide3">
          <a href="#">
          <img src="images/img-3.jpg" alt="">
          <p class="tooltip">
            乐观          </p>
          </a>
        </li>
        <li class="slide-item slide4">
          <a href="#">
          <img src="images/img-4.jpg" alt="">
          <p class="tooltip">
            美好          </p>
          </a>
        </li>
        <li class="slide-item slide5">
          <a href="#">
          <img src="images/img-5.jpg" alt="">
          <p class="tooltip">
            意义          </p>
          </a>
        </li>
      </ul>
      <p class="progress">

      </p>
    </p>
  </p></body>

La partie html est toujours la même chose, conteneur + plusieurs sous-éléments d'image de carrousel

Partie mise en page

/*reset*/html,body,p,ul,li,img,h1,a{
  margin: 0;
  padding: 0;
}ul{
  list-style: none;
}/*slide style*/html,body{
  width: 100%;
  height: 100%;
}body{
  background: url('./../images/bg.png') repeat;
}.container{
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}.container .title-container{
  width: 800px;
  height: 100px;
  line-height: 100px;
  margin: 20px auto;
  text-align: center;
}.slide-box{
  position: relative;
  width: 800px;
  height: 533px;
  margin: 0 auto;
  border:5px solid #eaeaea;
    -webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.7);
            box-shadow:1px 1px 5px rgba(0,0,0,0.7);
}.slide-box ul{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}.slide-box ul li{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}.slide-box ul li .tooltip{
  position: absolute;
  left: 50px;
  top: -40px;
  height: 40px;
  width: 100px;
  text-align: center;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  line-height: 40px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}.slide-box ul li:hover .tooltip{
  top: 2px;
  z-index: 2;
}

1. Masquage du débordement du conteneur

2. Positionnement absolu de l'enfant du carrousel

Partie animation du carrousel

Cette partie est au centre de cet article.

Pour implémenter un carrousel en utilisant du CSS3 pur, vous devez utiliser l'animation d'animation dans une boucle infinie, et vous devez contrôler l'effet d'animation de chaque sous-élément individuellement, et l'effet global est un effet de carrousel parfait.

Les éléments enfants utilisent un positionnement absolu, et l'effet carrousel à obtenir est de gauche à droite, donc la valeur de gauche peut être contrôlée pour obtenir l'affichage et le masquage (le positionnement à l'extérieur du conteneur signifie le masquage) et les effets de glissement . Implémentez d'abord le premier sous-élément

.slide-box ul li.slide1{
  -webkit-animation: slide1 25s linear infinite; 
          animation: slide1 25s linear infinite;
}@-webkit-keyframes slide1 {
  0%  {
    left: 0;
    opacity: 1;
  }
  16%  {
    left: 0;
    opacity: 1;
  }
  20%  {
    left: 800px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
  95% {
    left: -800px;
    opacity: 0;
    z-index: 1;
  }
  96% {
    left: -800px;
    opacity: 0;
    z-index: 1;
  }
  100% {
    left: 0;
    opacity: 1;
    z-index: 1;
  }}

Le cycle du carrousel de conception est de 25 secondes, donc chaque sous-élément a 5 secondes de temps d'affichage et de mouvement. Effet d'animation du premier sous-élément : affichage 0-4s, 4-5s glissant vers la droite pour se cacher à l'extérieur du conteneur, puis glissant rapidement vers le côté gauche du conteneur pour se cacher (l'index z est modifié à ce moment, il sera donc n'affecte pas l'élément enfant affiché), le temps restant est d'attendre le prochain glissement et affichage à gauche. L'effet d'animation du deuxième sous-élément doit correspondre au premier sous-élément, notamment en termes de temps, afin que l'effet global soit bon. Comme suit :

.slide-box ul li.slide2{
  -webkit-animation: slide2 25s linear infinite;
          animation: slide2 25s linear infinite;
}@-webkit-keyframes slide2 {
  0%  {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
  16%  {
    left: -800px;
    opacity: 0;
    z-index: 1;
  }
  20%  {
    left: 0;
    opacity: 1;
    z-index: 1;
  }
  36% {
    left: 0;
    opacity: 1;
    z-index: 1;
  }
  40% {
    left: 800px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
  100% {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }}

Le deuxième sous-élément attend à l'extérieur du côté gauche du conteneur pendant 1 à 4 secondes et glisse vers la droite pendant 4 à 5 secondes ( à ce moment, le premier sous-élément se déplace vers la gauche pour se cacher), 5 à 9 secondes pour afficher, 9 à 10 secondes pour glisser vers l'extérieur pour se cacher.

De même pour les sous-éléments restants, ajustez l'animation de manière séquentielle et l'effet global sera très fluide.

Animation de la barre de progression

Le temps d'affichage étant supérieur à 4 s, vous pouvez ajouter une barre de progression et l'expérience interactive sera meilleure. p.progress en HTML est la structure de la barre de progression. Le style est le suivant :

.slide-box .progress{
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 0;
  background-color: rgba(0,0,0,0.7);
  -webkit-animation: progress 5s linear infinite;
          animation: progress 5s linear infinite;
  z-index: 2;
}@-webkit-keyframes progress {
  0%{
    width: 0;
  }
  80%{
    width: 100%;
  }
  81%{
    width: 0;
  }
  100%{
    width: 0;
  }}

Marquez la progression en contrôlant la largeur.

survoler l'animation en pause

Si vous devez mettre en pause l'animation lorsque la souris survole, utilisez animation-play-state: paused control

.slide-box:hover ul li,
.slide-box:hover .progress{
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

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!