Lade-Animation
In diesem Tutorial wird dir Schritt für Schritt erklärt, wie du eine Ladeanimation erstellen kannst. Sie enthält eine Animation aus Punkten, die dreidimensional erscheint, sowie drei Radiobuttons. Mit ihnen kann zwischen drei verschiedenen Hintergründen gewählt werden. Durch die spielerische Animation kann die Ladezeit angenehmer überbrückt werden.
Der erste Schritt in HTML
Als erstes legst du eine Datei mit der Endung .html an und fügst die Pflichtelemente hinzu, die unten erklärt werden.
Der DOCTYPE legt den Dokumententyp für den Browser fest, in diesem Fall ist es ein HTML Dokument.
Als nächstes wird die Sprache mit dem Befehl <html lang="en"> festgelegt. Hier ist es die Englische Sprache.
<!DOCTYPE html>
<html lang="en">
<head>
Als nächstes codieren wir den head Abschnitt. Dieser enthält die Metainformationen, also zusätzliche Informationen über das Dokument.
Zu aller erst fügst du den Befehl <meta charset="UTF-8"> ein. UTF-8 ist ein Unicode Zeichensatz, der die meisten Zeichen von modernen Sprachen enthält. Die 8 gibt an, dass 8-Bit-Blöcke zur Darstellung eines Zeichens benötigt werden.
Mit <meta name="viewport" content="width=device-width, initial-scale=1.0"> wird ein responsives Screen-Design festgelegt. Die Seite entspricht nun immer der Bildschrimgröße des benutzten Gerätes.
Anschließend wird dem Dokument ein Titel gegeben. Zwischen die Tags <title> </title> wird der Titel hineingeschrieben, welcher später im Browsertab zusehen sein wird.
Als letztes wird mit <link rel="stylesheet" href="styles.css"> das CSS-Stylesheet mit dem HTML-Dokument verlinkt, um nachher mit Hilfe von CSS die Ladeanimation zu gestalten.
Der Abschnitt wird mit dem Tag </head> geschlossen.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Pendel
Als nächstes wird der Abschnitt body erstellt. Es werden nun die Punkte für das Pendel codiert.
Äußerer div-Container
Zuerst erstellst du einen div-Tag mit der Klasse frame. Klassen sind dafür gedacht, alle Elemente mit demselben Klassennamen einheitlich designen zu können. Im Code sieht das dann folgendermaßen aus: <div class="frame">.
Der div-Container dient als eine Art Behälter, um die inneren HTML-Elemente zu gruppieren. Dieser Container ist dazu da, um die wichtigsten Rahmenbedingungen für die Animation festzulegen.
Erstes Kindelement
Ein Kindelement ist ein HTML-Element, welches innerhalb eines anderen HTML-Elementes steht. Hierbei handelt es sich um die Loading-Überschrift, welche über der Animation erscheinen wird. Sie wird mit einem h1-Tag, als Überschriftengröße und der Klasse class="loading...", definiert.
Zweites Kindelement
Nun erstellst du das zweite Kindelement mit einem div-Tag und der Klasse class ="dots". Dies ist ein Container, der die Punkte der Animation enthält.
Innerhalb des div-Containers erstellst du 20 weitere div-Tags, die die 20 Punkte in der Animation repräsentieren. Sie werden von eins bis 20 durchnummeriert und tragen jeweils zwei Klassen. Einmal die Klasse dot und einmal die Klasse dot-nummer. Das Wort nummer wird durch die jeweilige Nummer des Punktes ersetzt.
Die einzelnen Punkte bieten die Grundlage für die bewegte Animation. Durch die gemeinsame Klasse dot, können sie in CSS einheitlich gestaltet werden. Durch die verschiedenen Klassen dot-nummer, können diese unabhängig voneinander animiert werden.
Die Box wird mit dem Tag </div> geschlossen.
<body>
<div class="frame">
<h1 class="loading">loading...</h1>
<div class="dots">
<div class="dot dot-1"></div>
<div class="dot dot-2"></div>
<div class="dot dot-3"></div>
<div class="dot dot-4"></div>
<div class="dot dot-5"></div>
<div class="dot dot-6"></div>
<div class="dot dot-7"></div>
<div class="dot dot-8"></div>
<div class="dot dot-9"></div>
<div class="dot dot-10"></div>
<div class="dot dot-11"></div>
<div class="dot dot-12"></div>
<div class="dot dot-13"></div>
<div class="dot dot-14"></div>
<div class="dot dot-15"></div>
<div class="dot dot-16"></div>
<div class="dot dot-17"></div>
<div class="dot dot-18"></div>
<div class="dot dot-19"></div>
<div class="dot dot-20"></div>
</div>Drittes Kindelement
Als nächstes erstellst du das dritte Kindelement, welches die drei Buttons enthält, mit denen sich der Hintergrund verändern lässt, sowie den Hintergrund selbst.
Radio-Buttons
Du fügst drei input-tags und drei zugehörige label-tags hinzu.
Ein input-tag ist ein interaktives Element. Setzt du den type auf radio, erzeugt es einen Radio-Button. Das besondere an ihnen ist, das innerhalb einer Radio-Group immer nur genau ein Radio-Button ausgewählt werden kann. Jeder Radio-Button braucht eine einzigartige id, um sie mit dem label zu verknüpfen. Schreibe dazu in den input-Tag id="check-1". Alle Radio-Buttons brauchen dasselbe name-Attribut: name="rd", um sie derselben Radio-Group zuordnen zu können.
Um ein label mit einem Radio-Button zu verknüpfen braucht es das for-Attribut, welches die id des Radio-Buttons beinhaltet. Die labels erhalten eine einheitliche Klasse circle und eine einzigartige id c1 - c3.
Um unsere Radio-Buttons zu designen, können wir einen Trick anwenden. Die Labels werden hier als anklickbare dünne Kreise dargestellt. Durch die Verknüpfung mit den Radio-Buttons haben die Labels die erwartete Funktion der Radio-Buttons. Dadurch sparst du es dir, die Radio-Buttons mühselig umzudesignen und kannst stattdessen einfach die Labels stylen.
Active
Erstelle als nächstes einen div-Tag mit der Klasse class="active". Hierbei handelt es sich um den weißen Kreis, der anzeigt, welcher Button gerade ausgewählt ist.
Background
Zuletzt erstellst du einen div-Tag mit der Klasse class="bg". Dieser ist eine Box mit zwei verschiedenfarbenen Rändern, die so groß sind wie der frame selbst. Die Box wird im frame bewegt, um die unterschiedlichen Hintergrundfarben anzuzeigen. Farbe eins ist der linke Rand, Farbe zwei die Box selbst und Farbe drei stellt den rechten Rand dar.
Die Bereiche body und html werden mit </body> und </html> geschlossen.
<div>
<input type="radio" id="check-1" name="rd"/>
<label class="circle" for="check-1" id="c1"></label>
<input type="radio" id="check-2" name="rd"/>
<label class="circle" for="check-2" id="c2"></label>
<input type="radio" id="check-3" name="rd"/>
<label class="circle" for="check-3" id="c3"></label>
<div class="active"></div>
<div class="bg"><div>
</div>
</body>
</html>Nun bist du am Ende des HTML Codes angekommen. Um zu verstehen, was du codiert hast, haben wir dir unten ein Bild eingefügt, wie dein Quellcode bis jetzt im Browser aussehen sollte. Da dies aber noch ziemlich leer aussieht, geht es jetzt an den Quellcode vom CSS!
Stylesheet CSS
Nun wechselst du zu deinem CSS-Stylesheet, welches zuvor mit dem HTML-Dokument verlinkt wurde.
frame
Zu aller erst wird das Design für den Rahmen festgelegt. Um in CSS eine HTML-Klasse auszuwählen, muss ein Punkt vor den Klassennamen gesetzt werden. Nutze den Selektor .frame {}, mit der du die Klasse frame aufgreifts. In den geschweiften Klammern werden die einzelnen Attribute gestylt.
Der Rahmen erhält die Eigenschaft position: mit dem Wert absolute; , damit können Elemente, hier der Rahmen, unabhängig vom Textfluss positioniert werden, dies geschieht mit den Eigenschaften left, right, top und bottom.
Mit width: 400px; und height: 550px; definierst du die Breite und Höhe des Rahmens.
Der Rahmen soll mittig auf dem Bildschirm positioniert sein. Dafür schiebst du den Rahmen um 50% der verfügbaren Breite bzw. Höhe des Bildschirms nach rechts bzw. unten. Das erreichst du mit den Deklarationen top: 50%; und left: 50%;. Da in CSS aber die Position einer Box immer nur in der oberen linken Ecke bestimmt wird, ist unsere Ecke nun genau mittig. Die Box selbst aber noch nicht. Deshalb müssen wir sie um jeweils eine halbe Höhe und eine halbe Breite zurückschieben. Nutze dafür die Deklarationen margin-top: -275px; und margin-left: -200px;. Damit ist deine Box nun genau in der Mitte des Bildschirmes.
Mit border-radius: 2px; werden die Ecken deiner Box leicht abgerundet.
overflow: hidden; verbirgt alles, was über den Rand des Rahmens hinausragt. Das ist nötig, um die Hintergrundfarben, die gerade nicht ausgewählt sind, zu verstecken. So sieht man nur die jeweils ausgewählte Farbe. Die anderen Farben passen nämlich nicht in die von uns erstellten Boxen hinein. Falls dir nicht klar ist, was gemeint ist, kannst du versuchen diese Eigenschaft auszukommentieren (in CSS mit /* */ und in HTML mit <!-- -->) und schauen, was passiert.
Mit box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 30%); erhält die Box einen leichten Schatten, um das Ganze plastischer aussehen zu lassen.
Hinter den Werten verstecken sich folgende Bedeutungen:
offset-x ≙ 1px;
offset-x ist horizontale Verschiebung des Schattens, hier: nach rechts, da der Wert positiv ist.
offset-y ≙ 2px;
offset-y ist die vertikale Verschiebung des Schattens, hier: nach unten, da der Wert positiv ist.
blur-radius ≙ 10px;
blur-radius stellt die Größe und den Grad der Verschwommenheit dar. Dieser Wert darf nur positiv sein.
color ≙ 0 0 0 / 30%;
color ist die Schattenfarbe, sie ist hier schwarz ( 00 00 00, die in CSS mit 0 0 0 abgekürzt wird, ist die Hexadezimale Farbdefinition der Farbe Schwarz). Hier wird am besten mit Transparenz gearbeitet, deshalb die 30%.
.frame {
position: absolute;
width: 400px;
height: 550px;
top: 50%;
left: 50%;
margin-top: -275px;
margin-left: -200px;
border-radius: 2px;
overflow: hidden;
box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 30%);
}Loading...
Als nächstes wird die Überschrift "loading..." codiert.
Das Wort bekommt die Schriftart Helvetica mit der Deklaration font-family: "Helvetica";.
Mit margin: 0; entfernst du den Rand des Rahmens und kannst stattdessen wieder mit position: absolute; anhand der x- und y-Koordinaten selbst bestimmen, wo du die Schrift auf dem Bildschirm platzieren willst.
Damit sich der Schriftzug in der Mitte des Bildschirmes befindet, gibst du den Eigenschaften folgende Werte: top: 25px; und left: 130px;. Dadurch wird die Schrift nun um 25px nach oben und 130px nach links verschoben.
Der z-index; verschiebt die Schrift innerhalb der Ebenen nach vorne oder hinten, je höher der Wert, desto weiter vorne ist der Schriftzug. Damit sie nicht hinter dem farbigen Hintergrund verschwindet, stellst du ihn auf 3.
Mit color: white; wird die Schriftfarbe auf weiß gestellt, damit sie auf dem farbigen Hintergrund gut zu lesen ist.
.loading {
font-family: "Helvetica";
margin: 0;
position: absolute;
top: 25px;
left: 130px;
z-index: 3;
color: white;
}Pendel
Nun werden die Punkte formatiert. Hier wird die Klasse .dots aus dem HTML aufgegriffen.
Nun bestimmst du die gemeinsame Position der Punkte. Die position ist wieder absolute; und kann dadurch anhand von x- und y-Koordinaten beliebig definiert werden. Mit margin-top 28px; und margin-left 194px; legst du die Position der Punkte fest. Die Punkte werden 28px nach oben und 194px nach links verschoben.
Den z-indexstellst du auf 2, damit die Punkte nicht hinter dem farbigen Hintergrund verschwinden.
Im nächsten Abschnitt definierst du Form und Aussehen. Mit width und height bestimmst du die Breite und Höhe deiner Punkte. Sie sind 12px hoch und 12px breit.
Mit background #fff färbst du die Punkte weiß ein, damit sie auf dem farbigen Hintergrund gut zu sehen sind. Damit die Punkte auch rund sind müssen wir den border-radius auf 50% stellen, dieser sorgt für die runde Form.
Mit margin: 5px 0; definieren wir, dass jeder Punkt oben und unten 5px Abstand zueinander hat. Die 0 bedeutet, dass die Punkte nicht nach links oder rechts verschoben werden.
.dots {
position: absolute;
z-index: 2;
margin-top: 28px;
margin-left: 194px;
}
.dot {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
margin: 5px 0;
}Nun werden alle zwanzig Punkte einzeln animiert.
Dafür greiftst du zuerst mit der Klasse .dot-1 den aller ersten Punkt auf. Mit der Deklaration animation: dot 1016.949ms ease-in-out infinite; legst du fest, wie schnell sich der Punkt bewegen soll und wie diese Bewegung erfolgen soll. Die Bewegung des ersten Punktes dauert 1016.949 Milisekunden. Ease-in-out legt fest, dass die Animation am Anfang sowie am Ende langsam und gleichmäßig erfolgt und nicht zu schnell verläuft. Der Wert infinite bedeutet, dass die Animation in einer Endlosschleife läuft.
Diesen Prozess wiederholst du bei allen zwanzig Punkten. Der einzige Unterschied befindet sich bei den Werten von animation: dot. Diese Deklaration hat unterschiedliche Werte, da sich die Punkte unterschiedlich schnell bewegen, um den Effekt des Pendels zu kreieren. Die Zeitangaben für die einzelnen Punkte findest du unten im Code. Ansonsten kannst du die restlichen Punkte nach dem gleichen Schema animieren.
.dot-1 {
animation: dot 1016.949ms ease-in-out infinite;
}
.dot-2 {
animation: dot 1034.482ms ease-in-out infinite;
}
.dot-3 {
animation: dot 1052.631ms ease-in-out infinite;
}
.dot-4 {
animation: dot 1071.428ms ease-in-out infinite;
}
.dot-5 {
animation: dot 1090.909ms ease-in-out infinite;
}
.dot-6 {
animation: dot 1111.111ms ease-in-out infinite;
}
.dot-7 {
animation: dot 1132.075ms ease-in-out infinite;
}
.dot-8 {
animation: dot 1153.846ms ease-in-out infinite;
}
.dot-9 {
animation: dot 1176.471ms ease-in-out infinite;
}
.dot-10 {
animation: dot 1200ms ease-in-out infinite;
}
.dot-11 {
animation: dot 1224.49ms ease-in-out infinite;
}
.dot-12 {
animation: dot 1250ms ease-in-out infinite;
}
.dot-13 {
animation: dot 1276.596ms ease-in-out infinite;
}
.dot-14 {
animation: dot 1304.348ms ease-in-out infinite;
}
.dot-15 {
animation: dot 1333.333ms ease-in-out infinite;
}
.dot-16 {
animation: dot 1363.636ms ease-in-out infinite;
}
.dot-17 {
animation: dot 1395.349ms ease-in-out infinite;
}
.dot-18 {
animation: dot 1428.571ms ease-in-out infinite;
}
.dot-19 {
animation: dot 1463.415ms ease-in-out infinite;
}
.dot-20 {
animation: dot 1500ms ease-in-out infinite;
}Mit @keyframes dot werden die Punkte noch genauer animiert. Ein Keyframe ist eine einzelne Zeichnung, die die Anfangs- und Endpunkte eines reibungslosen Übergangs definiert. Einfach gesagt: die Keyframes sorgen für einen weichen Übergang der Animation.
Die Prozentangaben 0% und 100% werden verwendet, wenn die Animation den gleichen Anfang und das gleiche Ende haben. Bei unserer Animation ist das der Fall, da sie in einer Endlosschleiße läuft. 0% sind die Eigenschaften zu Beginn der Animation und 100% die Eigenschaften zum Ende der Animation.
transform: translate verändert die Position, bevor das Element im Browser gerendert wird. Die Werte die sich bei transform (x/y); innerhalb der Klammern befinden, stehen für die Werte um die sie nach oben bzw. unten verschoben werden. Unsere Punkte werden innerhalb ihrer Position horizonatal um 50px entlang der x-Achse verschoben und vertikal werden sie nicht verschoben, daher die 0. Bei 100%, also am Ende der Animation werden unsere Punkte um 50px nach rechts verschoben.
Die 50% definieren die Eigenschaften, die nach der Hälfte der Animation geschehen. Nach dem sich der Punkt um 50px nach rechts verschoben hat wird er durch transform: translate (-50px;0); wieder um 50px nach links und um 0 Einheiten nach oben verschoben. Bei der Hälfte der Animation bewegt sich unser Punkt also wieder zurück auf seine Anfangspositon.
Dadurch bewegt sich der Punkt nach rechts und links. Durch die unterschiedlichen Geschwindigkeiten entsteht die optische Täuschung des Pendels.
@keyframes dot {
0%,
100% {
transform: translate(50px, 0);
}
50% {
transform: translate(-50px, 0);
}
}Radio Buttons
Nun erstellen wir die Radio-Buttons, also die drei Knöpfe, welche unterhalb des Pendels zu sehen sind.
input[type="radio"] definiert den Radiobutton.
Durch display: none; werden die eigentlichen Radio-Buttons nicht angezeigt, sondern nur die Labels mit denen sie verknüpft sind, also die weißen Kreise, dessen Aussehen und Position genauer definiert werden.
Indem du die Klasse .circle aufgreifst, kannst du das Aussehen des Kreises definieren, welches für alle drei Kreise gleich ist.
Die Position kann mit position: absolute; wieder beliebig gewählt werden und den z-index stellst du auf 2, damit unsere Radiobuttons nicht hinter unseren Hintergrundelementen verschwinden.
Der erste Kreis der Radio Buttons befindet sich durch bottom: 20px;20px über dem unteren Rand des Bildschirms und durch left: 115px; 115px weiter links. Der Kreis bekommt durch width: 50px und height: 50px; eine Breite und Höhe von 50px. Die Deklaration border: 2px solid #fff; sorgt dafür, dass der Rand des Kreises 2px beträgt und dieser durch solid als eine durchgezogene Linie dargestellt wird. Der Hexcode #fff färbt den Kreis weiß ein.
Die Eigenschaft border-radius: 50%; ermöglicht uns erneut die runde Form.
Mit cursor: pointer; gibst du an, dass sich der Mauszeiger beim hovern über die jeweils nicht ausgewählten Buttons verändert.
Diese Codierung gilt für alle drei Radiobuttons. Der einzige Unterschied befindet sich in der Position.
Kreis zwei wird mit der id #c2 aus dem HTML-Dokument aufgegriffen und mit left: 175px; um 175px weiter nach links verschoben. Kreis drei wird mit der id #c3 aufgegriffen und mit left: 235px; um 235px weiter nach links verschoben. Dadurch befinden sich nun alle drei Kreise im gleichem Abstand nebeneinander.
input[type="radio"] {
display:none;
}
.circle {
box-sizing: border-box;
position: absolute;
z-index: 2;
bottom: 20px;
left: 115px;
width: 50px;
height: 50px;
border: 2px solid #fff;
border-radius: 50%;
cursor: pointer;
}
#c2 {
left: 175px;
}
#c3 {
left: 235px;
}Im nächsten Teil wird mit .active Position und Bewegung des bewegten Kreises des Radio Buttons definiert.
Mit position: absolute kann wieder eine beliebige Position festgelegt werden. Verschiebe den Button mit bottom: 25px; um 25px nach unten und mit left: 120px; um 120px nach links.
Der Button erhält durch width: 40px; und height: 40px; eine Höhe und Breite von 40px.
Mit dem z-index: 3 sorgst du dafür, dass der Button nicht hinter den farbigen Hintergründen verschwindet.
Die Farbe des bewegten Buttons wird mit background: #fff; festgelegt, sie ist hier weiß.
Mit der Eigenschaft border-radius 50%; wird der Kreis definiert.
Mit transition: all 1s ease; wird der Übergang definiert. Der Wert all bedeutet, dass die Bewegung an jedem Element vorgenommen werden soll. Die 1s gibt an, dass die Bewegung eine Sekunde lang dauern soll und ease, dass der Anfang und das Ende langsam und gleichmäßig erfolgen sollen, sodass man einen weichen und fließenden Übergang erhält.
.active {
position: absolute;
bottom: 25px;
left: 120px;
width: 40px;
height: 40px;
z-index: 3;
background: #fff;
border-radius: 50%;
transition: all 1s ease;
}Mit #check-1:checked ~ .active greifst du den inneren Kreis des Ersten Radio-Buttons auf und definierst seine Bewegung.
Die Eigenschaft transform: translateX repräsentiert die vertikale Bewegung an der x-Achse, deshalb das X hinter translate. Der erste Button wird beim Anklicken des ersten Kreises um 0px nach links oder rechts verschoben, sodass der erste Radio-Button anfangs immer ausgewählt ist.
Mit #check-2 wird der innere weiße Kreis für den zweiten Radiobutton aufgegriffen. Wenn der zweite Radio-Button angeklickt wird, wird der Kreis mit transform: translateX(60px); um 60px nach rechts verschoben.
Mit #check-3 wird der innere weiße Kreis des dritten Radiobuttons aufgegriffen. Wenn der dritte Button angeklickt wird, verschiebt sich der weiße Kreis durch transform: translateX(120px); um 120px nach rechts.
#check-1:checked ~ .active {
transform: translateX(0px);
}
#check-2:checked ~ .active {
transform: translateX(60px);
}
#check-3:checked ~ .active {
transform: translateX(120px);
}Nun werden die drei verschiedenen Hintergründe samt ihrer Position, Farbe und Bewegungsgeschwindigkeit definiert.
Im CSS wird die Klasse .bg aufgerufen. Dem Hintergrund wird die Eigenschaft position:absolute; zugeteilt. Dadurch kannst du die Position wieder selbst bestimmen. Mit der Eigenschaft width: 400px; wird die Breite und mit height: 100%; die Höhe des Hintergrundes festgelegt.
Als nächstes werden die Hintergrundfarben mit einem Hex-Farbcode festgelegt.
Du kannst dir das wie ein Rechteck vorstellen, der in drei Abschnitte unterteilt ist: die linke Seite, die Mitte und die rechte Seite. Davon ist allerdings immer nur ein Abschnitt, also eine Farbe, sichtbar. Die anderen befinden sich nicht im sichtbaren Rahmen.
Der mittlere Hintergrund erhält den Hex-Farbcode #3498db , welcher ein Blauton ist.
Nun wird die Hintergrundfarbe auf der linken Seite des Rechteckes definiert. Dafür verwendest du die Eigenschaft border-left: und schreibst ihr den Wert 400px zu, das entspricht der Verschiebung um 400px nach links, da du nun die linke Seite des Hintergrundes definierst. Hinter die Angabe für die Breite kommt der Wert solid, welcher einen durchgezogenen Rahmen um die Fläche definiert. Anschließend wird ihm Farbe #9b59b6 gegeben, das ein Lilaton ist.
Genau nach demselben Prinzip wird die rechte Seite des Rechteckes definiert, nur wird hier mit der Eigenschaft border-right: gearbeitet, da du den Hintergrund auf der rechten Seite definierst. Dieser Teil des Hintergrundes bekommt die Farbe #1abc9c, welcher ein Grünton ist.
Um die Geschwindigkeit für die Bewegung des Hintergrundes zu definieren, wenn man den Radio-Button betätigt, wird die Deklaration transition: all 1s ease; verwendet. transition steht für die Bewegung bzw. den Übergang beim Wechsel der Hintergrundfarben. Wird ein Radio-Button angeklickt, dauert der Wechsel zwischen den Farben 1s. Der Wert ease gibt an, dass der Anfang und das Ende des Überganges langsam und gleichmäßig erfolgen soll, sodass man einen weichen und fließenden Übergang erhält.
.bg {
position: absolute;
width: 400px;
height: 100%;
background: #3498db;
border-left: 400px solid #9b59b6;
border-right: 400px solid #1abc9c;
transition: all 1s ease;
}In diesem Abschnitt wird die Verschiebung der Hintergründe definiert.
Zuerst greifst du mit #check-1 die id des ersten Radio-Buttons auf. Mit dem Selektor checked ~ .bg wird beschrieben, dass der erste Radio-Button ausgewählt ist und die Klasse des Hintergrundes aufgerufen wird. Die Pseudoklasse :checked wählt Elemente aus, die sich im ausgewählten Zustand befinden. Der Pseudo-Klassenselektor :checked stimmt mit Radio-Eingabetypen überein, wenn er aktiviert wird. Wenn sie nicht aktiviert sind, gibt es keine. Die Position wird mit transform: translateX(0px); festgelegt. Das X hinter translate beschreibt erneut die Bewegung entlang der x-Achse. Der Hintegrund bewegt sich um 0px entlang der x-Achse. Die anderen beiden Hintergründe werden nach demselben Schema einmal um -400px und einmal um -800px verschoben. Somit sind die anderen Hintergründe nicht im Rahmen und werden erst sichtbar, wenn diese ausgewählt werden.
#check-1:checked ~ .bg {
transform: translateX(0px);
}
#check-2:checked ~ .bg {
transform: translateX(-400px);
}
#check-3:checked ~ .bg {
transform: translateX(-800px);
}Du bist am Ende dieses Tutorials angekommen. Um zu überprüfen, ob du alles richtig gemacht hast, haben wir dir unten ein Bild eingefügt, wie das Resultat aussehen sollte. Falls dies nicht der Fall ist, schau dir den Quellcode noch einmal genau an. Natürlich kannst du den Code auch ein wenig abändern und deiner Fantasie freien Lauf lassen, indem du beispielsweise die Farben der Hintergründe änderst.
Quellen
https://codepen.io/roydigerhund/pen/GZoxRy
https://codepen.io/roydigerhund/pen/xVKweb
CSS Snippets" + " | CSS-Tricks
LinkedIn Learning: Online Courses for Creative, Technology, Business Skills
https://developer.mozilla.org/en-US/
