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.
![1484806949979216.gif A set of cool hamburger icon deformation animation special effects](https://img.php.cn//upload/image/735/724/209/1484806949979216.gif)
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
HTML structure
The hamburger icon deformation animation The HTML structure of the special effect is as follows:
You can also use
instead of the button element.
Then you can add the corresponding class class to get the corresponding hamburger icon deformation animation.
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.
Tips
When using Hamburger as a menu button, it is recommended to use ARIA attributes.
If you are using
elements, they will not receive focus by default. You can add tabindex attributes and ARIA attributes to it.
In addition, you can also add a label to the hamburger icon.
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 (m.sbmmt.com)!
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
Latest Articles by Author
-
2023-03-15 16:54:01
-
2023-03-15 12:26:02
-
2023-03-14 18:58:01
-
2023-03-14 11:30:01
-
1970-01-01 08:00:00
-
2023-03-16 15:20:01
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00