So implementieren Sie ein Karusselldiagramm mit reinem CSS3

Vorwort

Im Vergleich zum durch JavaScript gesteuerten Karusselleffekt ist der durch reines CSS3 erzielte Karusselleffekt viel einfacher und effizienter, aber die Funktion ist auch einfacher. Nur das Karussell kann nicht manuell umgeschaltet werden.

Womit wird das erreicht? Seitenlayout + Animationsanimation

HTML-Teil

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

Der HTML-Teil ist immer noch derselbe, Container + mehrere Karussellbild-Unterelemente

Layout-Teil

/*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. Ausblenden des Containerüberlaufs

2. Absolute Positionierung des Karussell-Kinds

Karussell-Animationsteil

Dieser Teil steht im Mittelpunkt dieses Artikels.

Um ein Karussell mit reinem CSS3 zu implementieren, müssen Sie die Animationsanimation in einer Endlosschleife verwenden und den Animationseffekt jedes Unterelements einzeln steuern, damit der Gesamteffekt ein perfekter Karusselleffekt ist.

Die untergeordneten Elemente verwenden eine absolute Positionierung und der zu erzielende Karusselleffekt verläuft von links nach rechts, sodass der Wert von links gesteuert werden kann, um Anzeige- und Ausblendeffekte (Positionierung außerhalb des Containers bedeutet Ausblenden) und Gleiteffekte zu erzielen . Implementieren Sie zuerst den ersten Unterpunkt

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

. Der Designkarussellzyklus beträgt 25 Sekunden, sodass jeder Unterpunkt 5 Sekunden Anzeige- und Bewegungszeit hat. Animationseffekt von Unterpunkt eins: 0–4 Sekunden lang angezeigt, 4–5 Sekunden lang nach rechts gleiten, um sich außerhalb des Containers zu verstecken, und dann schnell auf die linke Seite des Containers gleiten, um ihn auszublenden (der Z-Index wird zu diesem Zeitpunkt geändert, also wird er geändert). hat keinen Einfluss auf das angezeigte untergeordnete Element), die verbleibende Zeit besteht darin, auf das nächste Schieben und die Anzeige auf der linken Seite zu warten. Der Animationseffekt des zweiten Unterpunkts muss insbesondere zeitlich mit dem ersten Unterpunkt übereinstimmen, damit der Gesamteffekt gut ist. Wie folgt:

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

Das zweite Unterelement wartet 1–4 Sekunden außerhalb der linken Seite des Containers und gleitet 4–5 Sekunden lang nach rechts heraus ( Zu diesem Zeitpunkt bewegt sich das erste Unterelement in Richtung „Zum Ausblenden nach links schieben“, 5–9 Sekunden zum Anzeigen und 9–10 Sekunden zum Ausblenden.

Passen Sie die Animation auf ähnliche Weise nacheinander für die übrigen Unterelemente an, und der Gesamteffekt wird sehr gleichmäßig sein.

Animation des Fortschrittsbalkens

Da die Anzeigezeit länger als 4 Sekunden ist, können Sie einen Fortschrittsbalken hinzufügen und das interaktive Erlebnis wird besser. p.progress in HTML ist die Struktur des Fortschrittsbalkens. Der Stil ist wie folgt:

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

Markieren Sie den Fortschritt, indem Sie die Breite steuern.

Hover-Pause-Animation

Wenn Sie die Animation anhalten müssen, während die Maus schwebt, verwenden Sie die Steuerung „animation-play-state: paused“

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

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Karusselldiagramm mit reinem CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!