クールなハンバーガーアイコン変形アニメーション特殊効果のセット-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

黄舟

Jan 19, 2017 pm 02:24 PM

簡単なチュートリアル

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。