Die Implementierung von HTML5 und CSS3 bot nicht nur eine neue Möglichkeit zur Standardisierung der Elemente auf einer Seite, sondern auch die Möglichkeit, neue Elemente einzubeziehen, die bei der Entwicklung der Webanwendungen nützlicher wären, sondern auch die Möglichkeiten dieser Elemente zu erweitern Lassen Sie Sprachen wie JavaScript beiseite, um dank CSS3 Effekte und Übergänge durchzuführen.
Natürlich gibt es JavaScript- Bibliotheken, die unglaubliche Effekte haben und deren Implementierung recht einfach ist, aber die meiste Zeit ist diese Funktionalität gekapselt und die Änderungsmöglichkeiten sind sehr kompliziert.
In diesen Fällen können wir CSS3 verwenden und mit ein wenig Arbeit Effekte und wirklich erstaunliche Funktionen wie ein Karussell erzielen, was in der Vergangenheit nur mit JavaScript möglich war.
Erstellen Sie unser Karussell
Zuerst fügen wir den HTML-Code für unser Karussell ein, der recht einfach ist, da nur unser Stylesheet und das <figure> -Tag eingefügt werden, um anzuzeigen, dass alles, was darin enthalten ist, grafischer Inhalt ist, z. B. Fotos, Diagramme oder In diesem Fall unser Karussell:
<! DOCTYPE html> <html lang = "en"> <head> <link type = "text / css" rel = "stylesheet" href = "styles_carrusel.css" /> <meta charset = "UTF-8"> <title> Karussell CSS3 </ title> </ head> <body> <figure class = "cards"> <div class = "cards__content"> <div class = "cards__element"> <h1> Element 1 </ h1> </ div> <div class = "cards__element"> <h1> Element 2 </ h1> </ div> <div class = "cards__element"> <h1> Element 3 </ h1> </ div> </ div> </ figure> </ body> </ html>
Wichtig, um die Klassen hervorzuheben, die wir in unser div aufgenommen haben, da sie es uns ermöglichen, die Manipulation in unserem CSS durchzuführen. Sobald dies erledigt ist, fahren wir mit der Implementierung unseres Stylesheets fort und geben zunächst unseren Elementen das 3D-Erscheinungsbild. Dazu verwenden wir die Perspektive und die Transformationseigenschaft :
.card { Position: absolut; oben: 50%; links: 50%; Breite: 190px; Höhe: 210px; Rand: 0; -Webkit-Perspektive: 800px; Perspektive: 800px; -webkit-transform: translate (-50%, -50%); -ms-transform: translate (-50%, -50%); transformieren: translatieren (-50%, -50%); }
Nachdem dies geschehen ist, werden wir einige Animationen einfügen, um dem Karussell-Stil eine Funktion zu verleihen, die wir später definieren werden. Wir definieren auch die Sekunden, die das gleiche für die Übergänge benötigt, und wir legen die Position für unsere Karten im Karussell fest:
.marks__content { Position: absolut; Breite: 100%; Höhe: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ (-182px) rotateY (0); transform: translateZ (-182px) rotateY (0); -webkit-animation: Karussell 10s unendlich kubisch-bezier (1, 0,015, 0,295, 1,225) vorwärts; Animation: Karussell 10s unendlich kubischer Bezier (1, 0,015, 0,295, 1,225) vorwärts; } .tarjetas__element { Position: absolut; oben: 0; links: 0; Breite: 190px; Höhe: 210px; Randradius: 6px; }
Jetzt arbeiten wir mit n-child an einer separaten Karte, um für jede Karte eine andere Hintergrundfarbe und die Behandlung von Übergängen festzulegen:
.tarjetas__elemento: n-tes Kind (1) { Hintergrund: # 394fd5; -webkit-transform: rotateY (0) translateZ (182px); transform: rotateY (0) translateZ (182px); } .tarjetas__elemento: n-tes Kind (2) { Hintergrund: # 39d570; -webkit-transform: rotateY (120deg) translateZ (182px); transform: rotateY (120deg) translateZ (182px); } .tarjetas__elemento: n-tes Kind (3) { Hintergrund: # f0091f; -webkit-transform: rotateY (240deg) translateZ (182px); transform: rotateY (240deg) translateZ (182px); }
Schließlich legen wir eine Hintergrundfarbe für den Körper fest und fügen unsere Regeln für das Wort Karussell hinzu. Dies geschieht mit Keyframes, die für die Definition des Codes für die Animation verantwortlich sind:
Körper { Hintergrund: # 6c4949; } @ -webkit-keyframes Karussell { 0%, 17,5% { -webkit-transform: translateZ (-182px) rotateY (0); transform: translateZ (-182px) rotateY (0); } 27,5%, 45% { -webkit-transform: translateZ (-182px) rotateY (-120deg); transformieren: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% { -webkit-transform: translateZ (-182px) rotateY (-240deg); transformieren: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% { -webkit-transform: translateZ (-182px) rotateY (-360deg); transformieren: translateZ (-182px) rotateY (-360deg); } } @keyframes Karussell { 0%, 17,5% { -webkit-transform: translateZ (-182px) rotateY (0); transform: translateZ (-182px) rotateY (0); } 27,5%, 45% { -webkit-transform: translateZ (-182px) rotateY (-120deg); transformieren: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% { -webkit-transform: translateZ (-182px) rotateY (-240deg); transformieren: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% { -webkit-transform: translateZ (-182px) rotateY (-360deg); transformieren: translateZ (-182px) rotateY (-360deg); } }
Sehen wir uns an, wie unser animiertes Karussell in unserem Browser aussieht:
Um auf dem Laufenden zu bleiben, sollten Sie unseren YouTube-Kanal abonnieren. ABONNIEREN
Wie wir sehen, ist es recht einfach, aber es erfüllt seine Funktionalität und was noch besser ist, ohne eine einzige Codezeile in JavaScript zu verwenden , es ist nur für jeden das Beispiel zu nehmen und ein wenig damit zu experimentieren, seine Größe zu erhöhen, Bilder hinzuzufügen und zu ändern der Stil des Karussells, was aufgrund seiner Bauweise durchaus möglich ist.