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)

Detaillierte Erläuterung der Kapselung von JavaScript-Animationsfunktionen

Detaillierte Erläuterung von CSS3 zum Erzielen eines reaktionsschnellen Akkordeoneffekts

Detaillierte Erläuterung der Kapselung von JavaScript-Animationsfunktionen

URL-Rewrite-Modul 2.1 URL-Rewrite-Modul – Regeln schreiben

Wählen Sie die besten Voreinstellungen aus, um vollständige Kompatibilität mit allen Browsern zu erreichen.

Detaillierte Erklärung der Docker-Einstiegspunktdatei

Beispiel für das Schreiben von mobilem H5 zum Aufrufen einer APP (IOS, Android)

Detaillierte Erklärung der jQuery-Methodenattribute

So verwenden Sie CSS, um eine Box horizontal und vertikal zu zentrieren (8 Methoden)

Beispiel für das Abrufen der neuesten Daten mithilfe einer MySQL-Mehrtabellenassoziations-Eins-zu-viele-Abfrage

So erstellen Sie https mit Nginx und dem kostenlosen Tencent Cloud-Zertifikat

So installieren Sie Golang unter Linux

Artikel empfehlen

CnBlogs - Teilen im benutzerdefinierten Blogstil

Das WeChat-Applet ermöglicht das Aufnehmen von Fotos und Auswählen von Bildern aus Alben

Beispiel für die Ausführung eines MySQL-Befehlszeilenskripts

Verstehen Sie einfach die Unterschiede in den Prinzipien gängiger SQL-Delete-Anweisungen

4 flexible SCSS-Kompilierungsausgabestile

So richten Sie Spring Boot mithilfe der Docker-Schichtenverpackung ein

Detaillierte Erklärung der wichtigsten Einzigartigkeit von v-for in Vue

jQuery implementiert die Funktion zum Hinzufügen und Löschen von Mitarbeiterinformationen

MySQL effiziente Abfrage Left Join und Gruppieren nach (plus Index)

vue + node + socket io realisiert die Interaktion mehrerer Personen und gibt den gesamten Prozess frei

Detaillierte Erläuterung der MySQL-Cursor-Konzepte und -Verwendung

Nginx konfiguriert denselben Domänennamen, um sowohl den http- als auch den https-Zugriff zu unterstützen

Zusammenfassung verschiedener Formen der Anwendung von CSS-Stilen in Webseiten

JavaScript implementiert eine Eingabefeldkomponente

calc(), um einen Vollbild-Hintergrundinhalt mit fester Breite zu erreichen