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)

Einige Probleme, die durch inkonsistente MySQL-Kodierung verursacht werden können

Druid-Verbindungspool mit niedriger Version + MySQL-Treiber 8.0 führt zu Thread-Blockierungen und Leistungseinschränkungen

Artikel

Installieren Sie Centos7 mithilfe einer virtuellen Hyper-V-Maschine

Artikel

Vue realisiert die Funktion zum Hochladen von Fotos auf den PC

Artikel

Detaillierte Erläuterung von CSS3 zum Erzielen eines reaktionsschnellen Akkordeoneffekts

Einige Probleme, die durch inkonsistente MySQL-Kodierung verursacht werden können

So zeichnen Sie eine vertikale Linie zwischen zwei Div-Tags in HTML

So erlauben Sie allen Hosts den Zugriff auf MySQL

js, um einen einfachen Kalendereffekt zu erzielen

Der Unterschied und die Verwendung von distinct und row_number() over() in SQL

Bringen Sie Ihnen bei, wie Sie die Zeigerposition in Javascript erhalten

Grafisches Tutorial zur Installation und Konfiguration von MySQL Community Server 8.0.11

Druid-Verbindungspool mit niedriger Version + MySQL-Treiber 8.0 führt zu Thread-Blockierungen und Leistungseinschränkungen

Installieren Sie Centos7 mithilfe einer virtuellen Hyper-V-Maschine

Vue realisiert die Funktion zum Hochladen von Fotos auf den PC

Artikel empfehlen

Was die Website am meisten braucht, ist eine Verbesserung der Erfahrung der Zielgruppe

Erste Schritte mit GDB unter Linux

Vue-Tutorial zur erweiterten Verwendung dynamischer Komponenten

Nexus verwendet Nginx-Proxy zur Unterstützung des HTTPS-Protokolls

Native JS-Drag-and-Drop-Funktion zum Erstellen eines Slider-Beispielcodes

Mysql-Beispiel für die Aufteilung in mehrere Zeilen und Spalten durch bestimmte Symbole

Tutorial zur Installation und Kennwortkonfiguration von MySQL 5.7.21

Windows verwendet VMware, um eine virtuelle Linux-Maschine zu erstellen und das Betriebssystem CentOS7.2 zu installieren

MySQL verwendet frm-Dateien und ibd-Dateien, um Tabellendaten wiederherzustellen

Detailliertes Tutorial zur Installation und Konfiguration von Nginx unter Centos7

Mysql gibt die Methode zur Datumsbereichsextraktion an

Detaillierte Erklärung zur Verwendung von awk unter Linux

Eine kurze Einführung in die MySQL MyCat-Middleware

Zusammenfassung der drei Regeln für die React-Statusverwaltung

Implementierungscode zum Hinzufügen eines Schrägstrichs zum Vue-Elementheaders