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)!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

Ersparnis in R.E.P.O. Erklärt (und speichern Dateien)

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Assassins Creed Shadows - So finden Sie den Schmied und entsperren Sie die Waffen- und Rüstungsanpassung

4 Wochen vor By DDD

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7563

15

CakePHP-Tutorial

1385

52

Wie lautet das Format des Kontonamens von Steam?

84

11

Win11 -Aktivierungsschlüssel dauerhaft

61

19

NYT -Verbindungen Hinweise und Antworten

28

99

Mehr anzeigen