CSS3-Kategoriemenüeffekt

Die CSS3-Kategoriemenüeffekte sind wie folgt:

HTML

<html>
<Kopf>
    <Titel></Titel>
    <style type="text/css">
        #bg { Breite: 1270px; Höhe: 751px; Rand: 0 auto; Hintergrund: URL("images/bg.jpg") keine Wiederholung; }
        .sblock { Breite: 800px; Höhe: 250px; Rand: 0 auto;}
        /*.sblock { transform:translateY(65%); }*/
        .sblock > div { Breite: 200px; Höhe: 250px; Rand: 0 auto; }
        .sb1 { padding-top: 170px; }
        .sb2 { Polsterung oben: 30px; }
        .sblock div:hover { transform: translateY(-10px); }
        .sblock div { Übergang:alle 0,5 s; }
        .sb1 > div:n-ter-Typ(1) { float: left; Hintergrund: url("images/1.jpg") keine Wiederholung; }
        .sb1 > div:n-ter-Typ(2) { float: links; Hintergrund: URL("Bilder/2.jpg") keine Wiederholung; }
        .sb1 > div:n-ter-Typ(3) { float: left; Hintergrund: url("images/3.jpg") keine Wiederholung; }
        .sb1 > div:n-ter-Typ(4) { float: left; Hintergrund: url("images/4.jpg") keine Wiederholung; }
        .sb2 > div:n-ter-Typ(1) { float: left; Hintergrund: url("images/5.jpg") keine Wiederholung; }
        .sb2 > div:n-ter-Typ(2) { float: left; Hintergrund: url("images/6.jpg") keine Wiederholung; }
        .sb2 > div:n-ter-Typ(3) { float: left; Hintergrund: url("images/7.jpg") keine Wiederholung; }
        .sb2 > div:n-ter-Typ(4) { float: left; Hintergrund: url("images/8.jpg") keine Wiederholung; }
    </Stil>
</Kopf>
<Text>
    <div id="bg">
        <Abschnitt Klasse="sblock sb1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </Abschnitt>
        <Abschnitt Klasse="sblock sb2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </Abschnitt>
    </div>    
</body>
</html>

Zusammenfassen

Oben sehen Sie den vom Editor eingeführten CSS3-Klassifizierungsmenüeffekt. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<: Die große Rolle von HTML-Meta

>>: Beheben Sie das Problem, dass Navicat keine Verbindung zum MySQL-Server im Centos-System in VMware herstellen kann