A set of cool hamburger icon deformation animation special effects-CSS Tutorial-php.cn

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.

A set of cool hamburger icon deformation animation special effects

Installation

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

bower install css-hamburgers
npm install hamburgers

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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

Related labels：

汉堡包图标，变形动画

source：php.cn

Previous article：Pure CSS3 paging bar UI design effect with transition animation effects Next article：Summary of common CSS properties

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