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!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<: Analyse von MySQL-Lock-Wait- und Deadlock-Problemen

>>: Webdesign-Tutorial (3): Designschritte und Denkweise