CSS + JS realisiert den Folienanimationseffekt zum Umschalten der vertikalen Drehung (mit Code)

Der Inhalt dieses Artikels ist die Verwendung von CSS + JS, um einen einfachen Fade-Folien-Animationseffekt zu erzielen (mit Code). Ich hoffe, dass er für Sie hilfreich ist. .

Im Folgenden implementieren wir den Animationseffekt der vertikalen Drehung der Folie Schritt für Schritt durch den Code:

1. Erstellen Sie eine HTML-Datei und schreiben Sie eine Demo

Zuerst müssen wir eine Liste von Bildern auf der Seite einrichten, die in einer Div-Box enthalten ist. Ähnlich wie folgt:

<div id="stage">
	<div id="rotator" style="-webkit-animation-name: rotator; -moz-animation-name: rotator;">
		<a href="1.jpg"><img  src="img/1.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS + JS realisiert den Folienanimationseffekt zum Umschalten der vertikalen Drehung (mit Code)" ></a>
		<a href="2.jpg"><img  src="img/2.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS + JS realisiert den Folienanimationseffekt zum Umschalten der vertikalen Drehung (mit Code)" ></a>
		<a href="3.jpg"><img  src="img/3.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS + JS realisiert den Folienanimationseffekt zum Umschalten der vertikalen Drehung (mit Code)" ></a>
		<a href="4.jpg"><img  src="img/4.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS + JS realisiert den Folienanimationseffekt zum Umschalten der vertikalen Drehung (mit Code)" ></a>
		<a href="5.jpg"><img  src="img/5.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS + JS realisiert den Folienanimationseffekt zum Umschalten der vertikalen Drehung (mit Code)" ></a>
		<a href="6.jpg"><img  src="img/6.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS + JS realisiert den Folienanimationseffekt zum Umschalten der vertikalen Drehung (mit Code)" ></a>
		<a href="7.jpg"><img  src="img/7.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS + JS realisiert den Folienanimationseffekt zum Umschalten der vertikalen Drehung (mit Code)" ></a>
		<a href="8.jpg"><img  src="img/8.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSS + JS realisiert den Folienanimationseffekt zum Umschalten der vertikalen Drehung (mit Code)" ></a>
	</div>
</div>

Das Inline-Style-Attribut @keyframes verweist auf die Animation unten. Es muss Inline statt CSS sein, damit wir die Animation mithilfe von JavaScript stoppen und neu starten können.

2. Verwenden Sie CSS, um Bilder zu überlagern und Fotos im 3D-Raum anzuordnen.

Der CSS-Stil wird verwendet, um mehrere Fotos so zu positionieren, dass die Fotos vertikal wechseln.

  #stage {
    margin: 5em auto 1em 50%;
    height: 240px;
    -webkit-perspective: 1200px;
    -webkit-perspective-origin: 0 90px;
    -moz-perspective: 1200px;
    -moz-perspective-origin: 0 90px;
    -ms-perspective: 1200px;
    -ms-perspective-origin: 0 90px;
  }

  #rotator a {
    position: absolute;
    left: -151px;
    -moz-transform-style: preserve-3d;
  }
  #rotator a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
  }

  #rotator a:nth-of-type(1) img {
    -webkit-transform: rotateX(-90deg) translateZ(100px);
    -moz-transform: rotateX(-90deg) translateZ(100px);
    -ms-transform: rotateX(-90deg) translateZ(100px);
  }
  #rotator a:nth-of-type(2) img {
    -webkit-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    -ms-transform: translateZ(100px);
  }
  #rotator a:nth-of-type(3) img {
    -webkit-transform: rotateX(90deg) translateZ(100px);
    -moz-transform: rotateX(90deg) translateZ(100px);
    -ms-transform: rotateX(90deg) translateZ(100px);
  }
  #rotator a:nth-of-type(n+4) { display: none; }

3. Animationseffekte hinzufügen

3D-Umschalteffekt erzielen

  @-webkit-keyframes rotator {
    from { -webkit-transform: rotateX(0deg);  }
    to   { -webkit-transform: rotateX(90deg); }
  }
  @-moz-keyframes rotator {
    from { -moz-transform: rotateX(0deg);  }
    to   { -moz-transform: rotateX(90deg); }
  }
  @-ms-keyframes rotator {
    from { -ms-transform: rotateX(0deg);  }
    to   { -ms-transform: rotateX(90deg); }
  }

  #rotator {
    -webkit-transform-origin: 0 101px;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 1s;
    -moz-transform-origin: 0 101px;
    -moz-transform-style: preserve-3d;
    -moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -moz-animation-duration: 2s;
    -moz-animation-delay: 1s;
    -ms-transform-origin: 0 101px;
    -ms-transform-style: preserve-3d;
    -ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -ms-animation-duration: 2s;
    -ms-animation-delay: 1s;
  }
  #rotator:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
  }

4. Animationscontroller mit JavaScript hinzufügen

  document.addEventListener("DOMContentLoaded", function() {

    var rotateComplete = function(e) {
      with(target.style) {
        webkitAnimationName = MozAnimationName = msAnimationName = "";
      }
      target.insertBefore(arr[arr.length - 1], arr[0]);
      setTimeout(function(el) {
        with(el.style) {
          webkitAnimationName = MozAnimationName = msAnimationName = "rotator";
        }
      }, 0, target);
    };

    var target = document.getElementById("rotator");
    var arr = target.getElementsByTagName("a");

    target.addEventListener("webkitAnimationEnd", rotateComplete, false);
    target.addEventListener("animationend", rotateComplete, false);
    target.addEventListener("MSAnimationEnd", rotateComplete, false);

  }, false);

5. Effektanzeige

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er kann hilfreich sein Jedem Lernen hilft.

Empfohlene verwandte Artikel:

CSS zur Realisierung einer dreidimensionalen, rotierenden, unendlichen Karussellanimation

So fügen Sie mit CSS+ Text zu Folien hinzu js ? Implementieren Sie den Rotationswechsel von Folien

Das obige ist der detaillierte Inhalt vonCSS + JS realisiert den Folienanimationseffekt zum Umschalten der vertikalen Drehung (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!