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
Der Prozess des Aufbaus einer Entwicklungsumgebung basierend auf Visual Studio Code + React
Entwicklungsumgebungsfenster Entwicklungstools Vi...
Eine kurze Diskussion über MySQL-Index-Designprinzipien und die Unterschiede zwischen gängigen Indizes
Indexdefinition: Es handelt sich um eine separate...
Einführung in die MySQL-Gesamtarchitektur
Die Gesamtarchitektur von MySQL ist in die Server...
Beispielcode einer SVG-Schaltfläche basierend auf einer CSS-Animation
Der spezifische Code lautet wie folgt: <a href...
Beispielcode zum Implementieren der unteren Ausrichtung auf verschiedene Arten mit CSS
Aufgrund der Geschäftsanforderungen des Unternehm...
Lassen Sie uns über mein Verständnis und meine Anwendung von React Context sprechen
Inhaltsverzeichnis Vorwort Erster Blick auf React...
Vue implementiert Klicks und übergibt gleichzeitig Ereignisobjekte und benutzerdefinierte Parameter.
Übergeben Sie einfach benutzerdefinierte Paramete...
Docker ermöglicht mehrere Port-Mapping-Befehle
wie folgt: docker run -d -p 5000:23 -p 5001:22 --...
Tipps zum Erstellen von HTML-E-Mails, die in herkömmlichen Postfächern normal angezeigt werden können
Tipps zum Senden von HTML-E-Mails: Verwenden Sie ...
So zeigen Sie den Datenbankinstallationspfad in MySQL an
Wir können den Installationspfad von MySQL über d...
Implementierung einer Suchfeldfunktion mit Suchsymbol basierend auf HTML-CSS
Vorwort Ich möchte Ihnen zeigen, wie Sie ein Such...
Ein Leitfaden zum Schreiben flexibler, stabiler und qualitativ hochwertiger HTML- und CSS-Codestandards
Die goldene Regel Befolgen Sie immer die gleichen...
Eine Codezeile zeigt Ihnen, wie Sie Linux-Prozesse verbergen
Freunde fragen mich immer, wie man Linux-Prozesse...
jQuery implementiert die Registrierungsseite zur Mitarbeiterverwaltung
In diesem Artikelbeispiel wird der spezifische Co...
Beispiel für die Konvertierung von JavaScript-Datentypen (Konvertieren anderer Typen in Zeichenfolgen, numerische Typen und Boolesche Typen)
Vorwort Was ist Datentypkonvertierung? Der Standa...