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!
