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
Artikel empfehlen
Tutorial zu HTML-Tabellen-Tags (23): Zeilenrahmen-Farbattribut BORDERCOLORDARK
In Zeilen können dunkle Rahmenfarben individuell ...
So konfigurieren Sie mysql5.6 zur Unterstützung von IPV6-Verbindungen in einer Linux-Umgebung
Einführung: Dieser Artikel stellt hauptsächlich v...
Wie Sie React forwardRef verwenden und was Sie beachten müssen
Bisher konnte react.forwardRef nicht auf höherwer...
Beispielcode zum Implementieren mehrerer Zeilenauslassungen mithilfe von drei erweiterten CSS-Methoden
Vorwort Dies ist eine alte Forderung, aber es gib...
Vue implementiert die Verpackung und Verwendung von Komponenten zur Kontrolle der Warenanzahl
Die Kapselung und Verwendung der Vue-Komponente z...
Zusammenfassung der englischen Namen chinesischer Schriftarten
Wenn Sie in CSS die Eigenschaft „font-family“ ver...
So kompilieren Sie den Linux-Kernel
1. Laden Sie die erforderliche Kernel-Version her...
So verwenden Sie fdisk zum Partitionieren der Festplatte in Linux
Häufig verwendete Befehle für Linux-Partitionen: ...
W3C Tutorial (10): W3C XQuery Aktivitäten
XQuery ist eine Sprache zum Extrahieren von Daten...
Detaillierte Erklärung des Codes zwischen der MySQL-Masterbibliothek Binlog (Master-Log) und der Slave-Bibliothek Relay-Log
Binärprotokoll der Hauptbibliothek: # bei 2420 #1...
Beispielcode zur Implementierung des Verlaufs-Tag-Menüs mit vue+elementui+vuex+sessionStorage
Im Allgemeinen muss, nachdem sich auf der linken ...
So optimieren Sie die MySQL-Indexfunktion basierend auf dem Schlüsselwort „Explain“
EXPLAIN zeigt, wie MySQL Indizes verwendet, um Au...
Nexus nutzt API für den Betrieb
Nexus bietet RestApi, aber einige APIs müssen noc...
Installieren Sie Ubuntu 18 ohne USB-Laufwerk unter Windows 10 mit EasyUEFI
1. BIOS überprüfen Überprüfen Sie zunächst, in we...
jQuery implementiert gleitende Registerkarte
In diesem Artikelbeispiel wird der spezifische Co...