【Javascript】JavaScriptとCSSアニメーションのハンバーガーHambjergers

最小限のJavaScriptでウェブサイトのために設計され、完全にCSSアニメーションハンバーガー

Styles

  1. Arrow – Left
  2. Arrow – Right
  3. Arrow – Up
  4. Arrow – Down
  5. Cross – Rotate
  6. Cross – Spin
  7. Cross – Circled
  8. Cross – Circled Small
  9. Cross – Fold

HTML

<link rel="stylesheet" href="hambjergers.css">
<script type="text/javascript" src="hambjergers.js"></script>
<div id="" class="hamburger-container">
<span class="hamburger-piece"></span>
<span class="hamburger-piece"></span>
<span class="hamburger-piece"></span>
</div>

Framework / Create Your Own

#hamburger-custom-example .hamburger-piece:nth-of-type(#).open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
 
Hambjergers

【Javascript】JavaScriptとCSSアニメーションのハンバーガーHambjergers

  • LATEST
  • RELATED
  • POPULAR