A set of cool hamburger icon deformation animation special effects

Brief Tutorial

Hamburgers is a super cool hamburger icon deformation animation special effects CSS3 animation library. This set of hamburger icon animations includes 18 different hamburger deformation animation effects. You can also customize your own hamburger icon deformation animation through Sass files.

Installation

You can install Hamburgers hamburger deformation animation through bower or npm.

bower install css-hamburgers
npm install hamburgers

How to use

To use the hamburger deformation animation special effects, you need to introduce the hamburgers.css file into the page

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

HTML structure

The hamburger icon deformation animation The HTML structure of the special effect is as follows:

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

You can also use

instead of the button element.

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

Then you can add the corresponding class class to get the corresponding hamburger icon deformation animation.

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

The following are the classes for all the hamburger deformation animations you can choose.

• hamburger--arrow

• hamburger--arrow-r

• hamburger--arrowalt

• hamburger--arrowalt-r

• hamburger--boring

• hamburger--collapse

• hamburger--collapse-r

• ##hamburger--elastic

• hamburger--elastic -r

• hamburger--emphatic

• hamburger--emphatic-r

• hamburger- -slider

• hamburger--slider-r

• hamburger--spin

• hamburger- -spin-r

• hamburger--squeeze

• hamburger--vortex

• hamburger- -vortex-r

The class with -r represents the reverse effect of the animation without -r class.

Finally, to trigger the hamburger icon deformation animation, you need to add an is-active class.

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

Tips

When using Hamburger as a menu button, it is recommended to use ARIA attributes.

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

If you are using

elements, they will not receive focus by default. You can add tabindex attributes and ARIA attributes to it.

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

In addition, you can also add a label to the hamburger icon.

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

The github address of Hamburgers hamburger icon deformation animation special effects is: https://github.com/jonsuh/hamburgers

The above is a set of cool hamburger icon deformation animation special effects, more For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks ago By DDD

Two Point Museum: All Exhibits And Where To Find Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7375

15

Java Tutorial

1628

14

CakePHP Tutorial

1355

52

Laravel Tutorial

1267

25

PHP Tutorial

1216

29

Show More