Eine Reihe cooler Hamburger-Icon-Deformationsanimations-Spezialeffekte

Kurzes Tutorial

Hamburgers ist eine CSS3-Animationsbibliothek mit supercoolen Hamburger-Icon-Transformationsanimations-Spezialeffekten. Dieser Satz von Hamburger-Icon-Animationen umfasst 18 verschiedene Hamburger-Deformationsanimationseffekte. Sie können auch Ihre eigene Hamburger-Icon-Deformationsanimation über Sass-Dateien anpassen.

Installation

Sie können die Hamburger-Hamburger-Deformationsanimation über Bower oder NPM installieren.

bower install css-hamburgers
npm install hamburgers

Verwendung

Um die Spezialeffekte der Hamburger-Deformationsanimation zu verwenden, müssen Sie die Datei hamburgers.css in die Seite einfügen

<link href="dist/hamburgers.css" rel="stylesheet"></link>

HTML-Struktur

Die HTML-Struktur des Hamburger-Icon-Transformationsanimationseffekts ist wie folgt:

<button class="hamburger" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

Sie können auch

verwenden.

<div class="hamburger" type="button">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

Dann können Sie die entsprechende Klasse hinzufügen, um die entsprechende Animation zur Verformung des Hamburger-Symbols zu erhalten.

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

Im Folgenden sind alle Klassen für die Hamburger-Deformationsanimation aufgeführt, die Sie auswählen können.

• Hamburger--arrow

• Hamburger--arrow-r

• Hamburger--arrowalt

• Hamburger--arrowalt-r

• Hamburger--langweilig

• Hamburger--collapse

• Hamburger--collapse-r

• Hamburger--elastisch

• Hamburger--elastisch -r

• Hamburger--emphatic

• Hamburger--emphatic -r

• Hamburger- -slider

• Hamburger--slider-r

• Hamburger--spin

• Hamburger- -spin-r

• Hamburger--squeeze

• Hamburger--vortex

• Hamburger- -vortex-r

Die Klasse mit -r stellt den umgekehrten Effekt der Animation ohne Klasse -r dar.

Um schließlich die Animation zur Verformung des Hamburger-Symbols auszulösen, müssen Sie eine is-active-Klasse hinzufügen.

<button class="hamburger hamburger--collapse is-active" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

Tipps

Bei der Verwendung von Hamburger als Menüschaltfläche wird die Verwendung von ARIA-Attributen empfohlen.

<button class="hamburger hamburger--elastic" type="button"
        aria-label="Menu" aria-controls="navigation">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>
<nav id="navigation">
  <!--navigation goes here-->
</nav>

Wenn Sie

-Elemente verwenden, erhalten diese standardmäßig keinen Fokus. Sie können ihm Tabindex-Attribute und ARIA-Attribute hinzufügen.

<div class="hamburger hamburger--elastic" tabindex="0"
     aria-label="Menu" role="button" aria-controls="navigation">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>
<nav id="navigation">
  <!--navigation goes here-->
</nav>

Darüber hinaus können Sie dem Hamburger-Symbol auch eine Beschriftung hinzufügen.

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
  <span class="hamburger-label">Menu</span>
</button>

Die Github-Adresse der Spezialeffekte für Hamburger-Hamburger-Icon-Deformationsanimationen lautet: https://github.com/jonsuh/hamburgers

Das Obige ist eine Reihe cooler Hamburger-Icon-Deformationsanimationen Spezialeffekte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Verwandte Etiketten：

汉堡包图标，变形动画

Quelle：php.cn

Vorheriger Artikel：Reiner CSS3-Paging-Bar-UI-Designeffekt mit Übergangsanimationseffekten Nächster Artikel：Zusammenfassung allgemeiner CSS-Eigenschaften

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Videomaterial zum Aufbau Ihres eigenen PHP-Frameworks von Grund auf
  2023-03-15 16:54:01
• Beispielanalyse, wie PHPMailer das QQ-Postfach verwendet, um die E-Mail-Versandfunktion abzuschließen
  2023-03-15 12:26:02
• Einführung in den Empfang von E-Mails in IMAP in PHP
  2023-03-14 18:58:01
• Beispiel für die schnelle Implementierung der Array-Deduplizierung in PHP
  2023-03-14 11:30:01
• Zusammenfassung der Verwendung aller Attribute des -Tags in HTML
  1970-01-01 08:00:00
• Zusammenfassung der PHP-Grundkenntnisse (notwendig für Anfänger zum Einstieg)
  2023-03-16 15:20:01
• Einführung in die Verwendung von typeof in JavaScript
  1970-01-01 08:00:00
• Einführung in die Verwendung der Bestätigungsmethode () in JavaScript
  1970-01-01 08:00:00
• Eine detaillierte Einführung in das HTML5-Platzhalterattribut
  1970-01-01 08:00:00
• So implementieren Sie Einzelauswahl, Mehrfachauswahl und Rückwärtsauswahl in Formularen in ReactJS
  1970-01-01 08:00:00

Aktuelle Ausgaben

Vanilla JS setTimeout(): Falsches Verhalten identifizieren Ich habe eine Animation auf meinem Hamburger-Menü, die in HTML, CSS und Vanilla-JavaScript...

Aus 2024-04-02 20:44:40

0

1

284

verwandte Themen

Mehr>

• Vorteile von Pycharm
• Nach dem Einschalten des Computers zeigt der Monitor kein Signal
• Der Unterschied zwischen MS-Karte und SD-Karte
• Was ist der Unterschied zwischen PHP5 und PHP7?
• Was soll ich tun, wenn die chinesische Neustarteinstellung von vscode nicht wirksam wird?
• Tastenkombinationen für den Windows-Sperrbildschirm
• Fensterhandle-Methode abrufen
• Festplattenwiederherstellungsdaten