クールなハンバーガーアイコン変形アニメーション特殊効果のセット

簡単なチュートリアル

Hamburgers は、非常にクールなハンバーガー アイコン変形アニメーション特殊効果 CSS3 アニメーション ライブラリです。このハンバーガー アイコン アニメーションのセットには、18 種類のハンバーガー 変形アニメーション効果が含まれています。また、Sass ファイルを使用して独自のハンバーガー アイコン変形アニメーションをカスタマイズすることもできます。

インストール

ハンバーガーのハンバーガー変形アニメーションは、bower または npm を通じてインストールできます。

bower install css-hamburgers
npm install hamburgers

使い方

このハンバーガー変形アニメーション特殊効果を使用するには、ハンバーガー.cssファイルをページに導入する必要があります

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

HTML構造

ハンバーガーアイコン変形アニメーション特殊効果のHTML構造は以下の通りです:

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

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

その後、対応するクラスを追加して、対応するハンバーガー アイコンの変形アニメーションを取得できます。

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

以下は、選択できるすべてのハンバーガー変形アニメーション クラスです。

• ハンバーガー--arrow

• ハンバーガー--arrow-r

• ハンバーガー--arrowalt

• ハンバーガー--arrowalt-r

• ハンバーガー--退屈

• ハンバーガー- -崩壊

• ハンバーガー--崩壊-r

• ハンバーガー--伸縮性

• ハンバーガー--伸縮性-r

• ハンバーガー--強調

• ハンバーガー--empハティックR

• ハンバーガー--スライダー

• ハンバーガー--スライダー-R

• ハンバーガー--スピン

• ハンバーガー--スピンR

• ハンバーガー--スクイーズ

• ハンバーガー--ボルテックス

• hamburger--vortex-r

-r を指定したクラス class は、-r クラスを使用しないアニメーションの逆効果を表します。

最後に、ハンバーガーアイコンの変形アニメーションをトリガーするには、is-active クラスを追加する必要があります。

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

ヒント

ハンバーガーをメニューボタンとして使用する場合は、ARIA属性を使用することをお勧めします。

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

要素を使用している場合、デフォルトではフォーカスを取得しません。 tabindex 属性と ARIA 属性を追加できます。

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

さらに、ハンバーガーアイコンにラベルを追加することもできます。

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

ハンバーガーのハンバーガーアイコン変形アニメーション特殊効果のgithubアドレスは次のとおりです: https://github.com/jonsuh/hamburgers

上記はクールなハンバーガーアイコン変形アニメーション特殊効果のセットです。関連コンテンツをさらにお楽しみいただくには、お支払いください。 PHP 中国語 Web サイト (www.php.cn) に注意してください。