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)

Ubuntu E: Sperre /var/lib/dpkg/lock-frontend konnte nicht abgerufen werden – offen (11: Ressource vorübergehend nicht verfügbar)

Artikel

Eine detaillierte Einführung in die Neugestaltung der Weibo-Komponente auf der Website (Bilder und Text)

Detaillierte Erläuterung von CSS3 zum Erzielen eines reaktionsschnellen Akkordeoneffekts

Ubuntu E: Sperre /var/lib/dpkg/lock-frontend konnte nicht abgerufen werden – offen (11: Ressource vorübergehend nicht verfügbar)

Eine detaillierte Einführung in die Neugestaltung der Weibo-Komponente auf der Website (Bilder und Text)

Ubuntu 20.04 setzt eine statische IP-Adresse (einschließlich verschiedener Versionen)

Detaillierte Erläuterung der Einführung in die JavaScript-Funktion

Detaillierte Diskussion der Unterschiede zwischen Schleifen in JavaScript

Beispielcode zum Implementieren der unteren Ausrichtung auf verschiedene Arten mit CSS

Implementierung der Nummernschild-Eingabefunktion im WeChat-Applet

Mysql aktualisiert bestimmte Felder einer anderen Tabelle basierend auf Daten aus einer Tabelle (SQL-Anweisung)

Detaillierte Schritte zur Installation von MySQL 8.0.27 in Linux 7.6-Binärdateien

Nativer JS-Musikplayer

Artikel empfehlen

Vue3 + TypeScript-Entwicklungszusammenfassung

Detaillierte Erläuterung der Vue-Projektoptimierung und -verpackung

Eine detaillierte Zusammenfassung der Regeln zur Verschachtelung von HTML-Tags, geeignet für Anfänger

Verwendung und Prinzipien von Provide und Inject in Vue3

Detailliertes Installationstutorial für MySQL 5.7 unter CentOS 6 und 7

Detaillierte Erläuterung des auf Python basierenden MySQL-Replikationstools

Detaillierte Erläuterung der Implementierung des MySQL-Autoinkrements des Primärschlüssels

Docker implementiert Container-Portbindung am lokalen Port

So stellen Sie Ihre erste Anwendung mit Docker bereit

So implementieren Sie die King of Glory-Personal-Ladeseite mit CSS3

So installieren Sie den Elasticsearch7.6-Cluster im Docker und legen ein Kennwort fest

Detaillierte Erklärung zum Erstellen einer MySQL-Master-Slave-Umgebung mit Docker

Grafisches Tutorial zur Installation und Konfiguration von mysql 8.0.16 winx64.zip

Lösung für die verstümmelte Anzeige von Linux SecureCRT

Detaillierte Einführung und Verwendungsbeispiele für Map-Tag-Parameter