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

簡単なチュートリアル

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

前の記事：純粋な CSS3 ページング バー UI デザイン効果とトランジション アニメーション効果 次の記事：一般的な CSS プロパティの概要

このウェブサイトの声明

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

著者別の最新記事

• 独自の PHP フレームワークをゼロから構築するためのビデオ資料
  2023-03-15 16:54:01
• PHPMailer が QQ メールボックスを使用して電子メール送信機能を完了する方法の分析例
  2023-03-15 12:26:02
• PHPでIMAPでメールを受信する方法の紹介
  2023-03-14 18:58:01
• PHP で配列の重複排除を迅速に実装する方法の例
  2023-03-14 11:30:01
• HTML での タグのすべての属性の使用の概要
  1970-01-01 08:00:00
• PHPの基礎知識まとめ（初心者が始めるのに必要）
  2023-03-16 15:20:01
• JavaScript での typeof の使用の概要
  1970-01-01 08:00:00
• JavaScript でのconfirm() メソッドの使用の概要
  1970-01-01 08:00:00
• HTML5 プレースホルダー属性の詳細な紹介
  1970-01-01 08:00:00
• ReactJS のフォームに単一選択、複数選択、逆選択を実装する方法
  1970-01-01 08:00:00

最新の問題

Vanilla JS setTimeout(): 間違った動作の特定 ハンバーガー メニューのアニメーションを HTML、CSS、およびバニラ JavaScript で作成しました。期待される結果 ハンバーガー メニュー ボタンをクリックすると、次の...

から 2024-04-02 20:44:40

0

1

284

関連トピック

詳細>

• ポート 445 を閉じるとどのような影響がありますか?
• letter-spacing
• win8wifi接続が利用できない場合の対処方法
• http 400 不正なリクエスト
• ブロックチェーンでお金を稼ぐ方法
• ルーターのデフォルトパスワード
• nhファイル
• Yiou Exchangeアプリの公式Webサイトをダウンロードするメリット