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

黄舟
リリース: 2017-01-19 14:24:12
オリジナル
2572 人が閲覧しました

簡単なチュートリアル

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) に注意してください。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート