Detaillierte Erläuterung von CSS3 zum Erzielen eines reaktionsschnellen Akkordeoneffekts
|
Ich habe mir vor kurzem ein Video von einem Ausländer angesehen, der CSS3 verwendet, um einen Akkordeoneffekt zu erzielen. Nachdem ich es selbst gelernt hatte, schrieb ich es auf und hielt es in Form eines Blogs für meine spätere Überprüfung fest. Die Codestruktur ist wie folgt (die verwendete Schriftart ist Genericons):
Der endgültige Effekt ist wie folgt: Im Vollbildmodus:
Wenn die Bildschirmbreite weniger als 960 Pixel beträgt:
Schauen wir uns die Grundstruktur der Seite (index.html) an:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<link rel="stylesheet" href="style.css">
</Kopf>
<Text>
<div Klasse="Container">
<!--Titel-->
<Kopfzeile>
<h1>Folgen Sie mir in den sozialen Medien</h1>
</header>
<!--Akkordeonabschnitt-->
<ul Klasse="Akkordeon">
<li Klasse="Tab">
<div Klasse="soziales YouTube">
YouTube
</div>
<div Klasse="Inhalt">
<h1>YouTube</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit.Culpa, consectetur.</p>
</div>
</li>
<li Klasse="Tab">
<div Klasse="soziales Facebook">
<a href="#">Facebook</a>
</div>
<div Klasse="Inhalt">
<h1>Facebook</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit.Culpa, consectetur.</p>
</div>
</li>
<li Klasse="Tab">
<div Klasse="soziales Twitter">
Þjórsárden
</div>
<div Klasse="Inhalt">
<h1>Twitter</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit.Culpa, consectetur.</p>
</div>
</li>
<li Klasse="Tab">
<div Klasse="soziales Instagram">
Instagram
</div>
<div Klasse="Inhalt">
<h1>Instagram</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit.Culpa, consectetur.</p>
</div>
</li>
<li Klasse="Tab">
<div Klasse="soziales LinkedIn">
<a href="#">Linkedin</a>
</div>
<div Klasse="Inhalt">
<h1>Linkedin</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit.Culpa, consectetur.</p>
</div>
</li>
<li Klasse="Tab">
<div Klasse="soziales Github">
Github
</div>
<div Klasse="Inhalt">
<h1>Github</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit.Culpa, consectetur.</p>
</div>
</li>
</ul>
</div>
</body>
</html>Stil (style.css):
*{
Rand: 0;
Polsterung: 0;
Rand: keiner;
}
Körper{
Schriftfamilie: Arial, Helvetica, serifenlos;
Hintergrundfarbe: #222;
Farbe: #fff;
}
/*Legen Sie die Schriftart fest, die für die folgenden Symbole verwendet werden muss*/
@Schriftart {
Schriftfamilie: „Genericons“;
Quelle: URL („Schriftart/genericons-regular-webfont.woff“) Format („woff“),
URL („Schriftart/genericons-regular-webfont.eot“) Format („TrueType“);
}
/*Legen Sie die Breite des äußeren Containers fest*/
.Container{
Breite: 80%;
Rand: 20px automatisch;
}
Überschrift h1{
Schriftgröße: 2rem;
Polsterung: 1rem;
Textausrichtung: zentriert;
}
/*Beachten Sie, dass die Schriftgröße hier auf 0 gesetzt ist, da sonst ein sehr schlechtes Bild angezeigt wird. Wir werden die Schriftgröße des Textes festlegen, der später angezeigt werden soll, da der Link keinen Inhalt anzeigen soll*/
.Akkordeon{
Breite: 100 %;
Mindestbreite: 800px;
Höhe: 200px;
Hintergrundfarbe: #333;
Listenstil: keiner;
Anzeige: Block;
Überlauf: versteckt;
Schriftgröße: 0;
}
/*Setzen Sie jedes li auf einen Inline-Block, sodass sie in einer Reihe angeordnet sind und der Überlauf ausgeblendet ist, da die Breite von .content unter .tab 360px beträgt und die Breite von .tab nur dann 450px beträgt, wenn Sie darüber schweben, wenn .content gerade angezeigt wird. Stellen Sie außerdem den Übergang so ein, dass die Breite gleichmäßig zunimmt*/
.Tab{
Breite: 80px;
Höhe: 100%;
Anzeige: Inline-Block;
Position: relativ;
Rand: 0;
Hintergrundfarbe: #444;
Rand: 1px durchgezogen #333;
Überlauf: versteckt;
Übergang: alle 0,5 s Leichtigkeit 0,1 s;
}
.tab:hover{
Breite: 450px;
}
.tab:hover .social a:nach{
transformieren: übersetzenX(-80px);
}
.tab:hover .social a:vorher{
transformieren: übersetzenX(-100px);
}
/*Stellen Sie die Positionierung auf relative Positionierung ein, sonst wird ein Teil von .content abgedeckt*/
.tab .inhalt{
Position: relativ;
Breite: 360px;
Höhe: 100%;
Hintergrundfarbe: #fff;
Farbe: #333;
Rand links: 80px;
Polsterung: 50px 0 0 15px;
}
.tab .content h1{
Schriftgröße: 2,5rem;
Rand oben: 20px;
}
.tab .content p{
Schriftgröße: .85rem;
Zeilenhöhe: 1,6;
}
/Setzen Sie die Breite und Höhe des Elements sowie die Schriftart auf Genericons, sonst wird das Symbol nicht angezeigt und nur ein weißer, leerer Rahmen angezeigt/
.sozial a:vorher,
.sozial a:nach{
Position: absolut;
Breite: 80px;
Höhe: 200px;
Anzeige: Block;
Texteinzug: 0;
Polsterung oben: 90px;
Polsterung links: 25px;
Schriftart: normal 30px Genericons;
Farbe: #fff;
Übergang: alle 0,5 Sekunden mühelos;
}
/*Da das Symbol größer wird, wenn wir mit der Maus darüber fahren, müssen die Schriftart und die Polsterung der Pseudoklasse danach zurückgesetzt werden und der linke Rand sollte auf 80 Pixel eingestellt werden, damit standardmäßig das kleine Symbol der Pseudoklasse davor angezeigt wird*/
.sozial a:nach{
Schriftgröße: 48px;
Polsterung oben: 80px;
Polsterung links: 20px;
Rand links: 80px;
}
/*Symbole hinzufügen*/
.youtube a:vorher,
.youtube a:nach{
Inhalt: '\f213';
}
.youtube a:nach{
Hintergrundfarbe: #fc0000;
}
.twitter a:vorher,
.twitter a:nach{
Inhalt: '\f202';
}
.twitter a:nach{
Hintergrundfarbe: #6dc5dd;
}
.facebook a:vorher,
.facebook a:nach{
Inhalt: '\f204';
}
.facebook a:nach{
Hintergrundfarbe: #3b5998;
}
.linkedin a:vorher,
.linkedin a:nach{
Inhalt: '\f208';
}
.linkedin a:nach{
Hintergrundfarbe: #00a9cd;
}
.instagram a:vorher,
.instagram a:nach{
Inhalt: '\f215';
}
.instagram a:nach{
Hintergrundfarbe: #6dc993;
}
.github a:vorher,
.github a:nach{
Inhalt: „\f200“;
}
.github a:nach{
Hintergrundfarbe: #6e5494;
}
/*Wenn die maximale Bildschirmbreite 960 Pixel beträgt*/
@media(max-width:960px){
.Container{
Breite: 70%;
}
/*Höhe auf automatisch setzen*/
.Akkordeon{
Mindestbreite: 450px;
Höhe: automatisch;
}
/*Lassen Sie li als Block anzeigen, damit es in der richtigen Reihenfolge angeordnet wird*/
.Tab{
Breite: 100 %;
Anzeige: Block;
Rahmen unten: 1px durchgezogen #333;
}
/*Dies muss festgelegt werden, da die ursprüngliche Breite von .tab:hover 450 Pixel beträgt. Wenn die Breite von .tab 600 Pixel beträgt, bleiben beim Hovern 150 Pixel Leerraum, was nicht der gewünschte Effekt ist*/
.tab:hover{
Breite: 100 %;
}
.tab .inhalt{
Breite: 85 %;
}
/*Setze den Padding-Wert der entsprechenden Pseudoklasse so, dass dieser etwa in der Mitte erscheint*/
.sozial a:vor{
Polsterung oben: 60px;
Polsterung links: 25px;
}
.sozial a:nach{
Polsterung oben: 50px;
Polsterung links: 20px;
}
}Dies ist das Ende dieses Artikels zum Erzielen eines responsiven Akkordeoneffekts mit CSS3. Weitere relevante CSS3-Inhalte zu responsiven Akkordeons finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: SQL-Implementierung von LeetCode (197. Steigende Temperatur)
>>: Vergleichende Analyse von UI-Anwendungen auf Bild-Social-Networking-Sites (Abbildung)
Artikel empfehlen
Reines HTML und CSS, um den JD-Karusselleffekt zu erzielen
Das JD-Karussell wurde mit reinem HTML und CSS im...
Installation von Ubuntu 18.04 meldet: ldlinux.c32 konnte nicht geladen werden und die Lösungsschritte dazu sind fehlgeschlagen
Vorwort Ich habe einen alten Laptop mit Win7. Um ...
Vergleich von 5 CSS-Scrolling-Ceiling-Implementierungsmethoden (Performance-Upgrade-Version)
Vorschau auf die überarbeitete Fassung Dieser Art...
Beheben von Problemen beim Importieren und Exportieren von Mysql
Hintergrund Da ich alle meine Aufgaben auf Docker...
Beheben Sie das Problem, dass Docker Run oder Docker Restart beim Starten des Images automatisch beendet werden
Führen Sie den Befehl aus: docker run --name cent...
Langsame MySQL-Abfrage: Langsame Abfrage aktivieren
1. Was nützt eine langsame Abfrage? Es kann alle ...
Vorschläge zum Erstellen geschäftlicher HTML-E-Mails
Durch E-Mail-Marketing auf Genehmigungsbasis lass...
Wählen Sie eine Dropdown-Liste für Webseiten und ein Problem mit der Abdeckung der Div-Ebene aus.
Fragen zu Select-Elementen in HTML wurden an viel...
CentOS7 stellt Version 19 von Docker bereit (einfach, Sie können es nachvollziehen)
1. Installieren Sie Abhängigkeitspakete [root@loc...
Der Unterschied zwischen absolutem und relativem Pfad bei der Webseitenerstellung
1. Absoluter Pfad Zunächst einmal bezieht sich de...
Detaillierte Erläuterung der JavaScript-Implementierung der Hash-Tabelle
Inhaltsverzeichnis 1. Hash-Tabellenprinzip 2. Das...
Vue implementiert Ankerpositionierungsfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung der Architektur und Funktionen von InnoDB (Zusammenfassung der Lesehinweise zur InnoDB-Speicher-Engine)
Hintergrund-Threads •Hauptthread Der Kern-Hinterg...
Nginx verwendet Reverse-Proxy, um eine Analyse des Lastausgleichsprozesses zu implementieren
Einführung Basierend auf Docker-Containern und Do...
Analyse des Prinzips und der Verwendung von MySQL-Benutzerdefinierten Funktionen
Dieser Artikel veranschaulicht anhand von Beispie...