Reines CSS3 zum Erstellen eines Beispielcodes für Seitenwechseleffekte
|
Das, was ich vorher geschrieben habe, ist zu kompliziert. Lasst uns einen einfachen Kern haben
<html>
<Kopf>
<Titel></Titel>
<style type="text/css">
* { Rand: 0; Polsterung: 0; Rahmen: keine; }
.Bl {
Breite: 600px;
Höhe: 540px;
Rand: 0 automatisch;
Position: relativ;
oben: 50 %;
transformieren: verschiebeY(-50%);
}
.Bl > Eingabe {
Breite: 20 %;
Höhe: 40px;
Position: absolut;
Cursor: Zeiger;
Deckkraft: 0;
}
.Bl Eingabe:n-ter-Typ(1){ links: 0%; }
.Bl Eingabe:n-ter-Typ(2){ links: 20%; }
.Bl Eingabe:n-ter-Typ(3){ links: 40%; }
.Bl Eingabe:n-ter-Typ(4){ links: 60%; }
.Bl Eingabe:n-ter-Typ(5){ links: 80%; }
/*Effekt wechseln*/
.Bl input:nth-of-type(1):checked ~ span:nth-of-type(1) { color: white; } /* ~ Geschwisterelemente auswählen*/
.Bl Eingabe:n-ter-Typ(2):geprüft ~ Spanne:n-ter-Typ(2) { Farbe: weiß; }
.Bl Eingabe:n-ter-Typ(3):geprüft ~ Spanne:n-ter-Typ(3) { Farbe: weiß; }
.Bl Eingabe:n-ter-Typ(4):geprüft ~ Spanne:n-ter-Typ(4) { Farbe: weiß; }
.Bl Eingabe:n-ter-Typ(5):geprüft ~ Spanne:n-ter-Typ(5) { Farbe: weiß; }
.Bl Eingabe:n-ter-Typ(1):aktiviert ~ .pagebox > .pages { }
.Bl Eingabe:n-ter-vom-Typ(2):aktiviert ~ .pagebox > .pages { transform: translateY(-100%); }
.Bl Eingabe:n-ter-Typ(3):aktiviert ~ .pagebox > .pages { transform: translateY(-200%); }
.Bl Eingabe:n-ter-vom-Typ(4):aktiviert ~ .pagebox > .pages { transform: translateY(-300%); }
.Bl Eingabe:n-ter-Typ(5):aktiviert ~ .pagebox > .pages { transform: translateY(-400%); }
Spanne {
Anzeige: Block;
Breite: 20 %;
Höhe: 40px;
Hintergrundfarbe: rot;
schweben: links;
Textausrichtung: zentriert;
Zeilenhöhe: 40px;
Schriftgröße: 20px;
}
.pagebox,.pages {
Breite: 100 %;
Höhe: 500px;
}
.pagebox {
Überlauf: versteckt;
}
.Seiten {
Übergang: alle 0,5 s;
}
.Seite {
Breite: 100 %;
Höhe: 100%;
Textausrichtung: zentriert;
Schriftfamilie: „Microsoft YaHei“;
Schriftgröße: 30px;
Zeilenhöhe: 500px;
Farbe: weiß;
}
.seite1 { Hintergrundfarbe: rosa; }
.page2 { Hintergrundfarbe: blau; }
.seite3 { Hintergrundfarbe: rot; }
.seite4 { Hintergrundfarbe: grün; }
.page5 { Hintergrundfarbe: schwarz; }
</Stil>
</Kopf>
<Text>
<div Klasse="Bl">
<input type="radio" name="btn" aktiviert ><span>1</span>
<Eingabetyp="Radio" Name="btn" ><span>2</span>
<Eingabetyp="Radio" Name="btn" ><span>3</span>
<Eingabetyp="Radio" Name="btn" ><span>4</span>
<Eingabetyp="Radio" Name="btn" ><span>5</span>
<Abschnitt Klasse="Seitenbox">
<div Klasse="Seiten">
<div class="page page1">Dies ist Seite1</div>
<div class="page page2">Dies ist Seite2</div>
<div class="page page3">Dies ist Seite 3</div>
<div class="page page4">Dies ist Seite4</div>
<div class="page page5">Dies ist Seite 5</div>
</div>
</Abschnitt>
</div>
</body>
</html>Zusammenfassen Oben ist der Beispielcode zum Erstellen von Seitenwechseleffekten mit reinem CSS3, den ich Ihnen vorgestellt habe. Ich hoffe, er wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Analyse von MySQL-Lock-Wait- und Deadlock-Problemen
>>: Webdesign-Tutorial (3): Designschritte und Denkweise
Artikel empfehlen
IDEA meldet einen Fehler beim Verbinden mit MySQL! Der Server gibt eine ungültige Zeitzone zurück. Gehen Sie zur Registerkarte und legen Sie die Eigenschaft „serverTimezone“ fest.
Der Weg vor uns ist immer so schwierig und voller...
Detaillierte Erklärung von 7 SSH-Befehlsverwendungen in Linux, die Sie nicht kennen
Ein Systemadministrator kann mehrere Server gleic...
So wandeln Sie lokale Variablen in JavaScript in globale Variablen um
Zuerst müssen wir den Selbstaufruf der Funktion k...
So stellen Sie Kafka in Docker bereit
Inhaltsverzeichnis 1. Docker erstellen 2. Betrete...
Der Unterschied und die Verwendung von Datum/Uhrzeit und Zeitstempel in MySQL
1. Wie wird die aktuelle Uhrzeit in MySQL dargest...
In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in den HTML-Webseitencode (Teil 2)
Mit dem obigen Artikel habe ich meine Einführung i...
Lösung für den Fehler „Mehrere Primärschlüssel definiert“ in MySQL
Es gibt zwei Möglichkeiten, einen Primärschlüssel...
Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4
Inhaltsverzeichnis 1. Installieren und erstellen ...
Vue-Elternkomponente ruft Funktionsimplementierung der Unterkomponente auf
Die übergeordnete Vue-Komponente ruft die Funktio...
Analyse des Bereitstellungsprozesses der Leistungstestplattform nGrinder mit Docker
Was ist nGrinder? nGrinder ist eine Plattform für...
Vue kapselt ein TodoList-Beispiel und implementiert die Anwendung des lokalen Browser-Cache
In diesem Artikel wird hauptsächlich der Fall vor...
VMWare15 installiert Mac OS-System (grafisches Tutorial)
Installationsumgebung Windows 10 VMware Workstati...
So beheben Sie den Verbindungsfehler zur Datenbank beim Start von ServerManager
Servermanager-Startfehler bei Verbindung zur Date...
Ein kurzes Verständnis der MySQL SELECT-Ausführungsreihenfolge
Die vollständige Syntax der SELECT-Anweisung laut...
Sprechen Sie darüber, wie HTML-Escapezeichen durch Code identifiziert werden können.
Gelegentlich werden Sie in den Daten Zeichen wie ...