CSS メニューボタンアニメーション

CSS メニューボタンアニメーション

ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリックすることです。以前は画像を使用して置き換えていました。今日は突然CSSを使用してエフェクトを書きたいと思いました。主にPengpaiモバイル端末の右上隅にあるボタンを参照します。

効果:

html

    //vue のクリック イベントを通じてクラスを変更する
    <div 
        クラス="ハンバーガー" 
        スタイル="float: right;"
        :class="{'transform':rightTopBtn}"
        @click.stop="rightTopBtn=!rightTopBtn"
    >
        <div></div>
        <div></div>
        <div></div>
    </div>

CS

  <!--ボタン コンテナ START-->
    .バーガー{
        カーソル: ポインタ;
        表示: インラインブロック;
        マージン: 7px 6px 0 0;
        アウトライン: なし;
    }
    <!--ボタンコンテナEND-->
    <!--3 本の水平線は rotate3d START によって回転します-->
    .burger div {
        幅: 30ピクセル;
        高さ: 4px;
        下マージン: 6px;
        背景色: rgb(51, 51, 51);
        変換: rotate3d(0, 0, 0, 0);
    }
    <!--3 本の水平線 END-->
    .burger.transform div {
        背景色: 透明;
    }
    .burger.transform div:first-of-type {
        上: 10px;
        変換: rotate3d(0, 0, 1, 45deg)
    }
    .burger.transform div:last-of-type {
        下: 10px;
        変換: rotate3d(0, 0, 1, -45deg)
    }
    <!--START をクリックした後の 1 番目と 3 番目の水平線の効果-->
    .burger.transform div:first-of-type、.burger.transform div:last-of-type {
        遷移: transform .4s .3s イーズ、背景色 250ms イーズイン;
        背景: #00c1de;
    }
    <!--クリック後の 1 番目と 3 番目の水平線の効果END-->
    <!-- START をクリックしてキャンセルした後、アニメーションを再開します -->
    .burger div:first-of-type、.burger div:last-of-type {
        遷移: transform .3s、ease .0s、background-color 0ms、ease-out;
        位置: 相対的;
    }
    <!--クリックをキャンセルした後にアニメーションを再開しますEND-->

トランジションのみでアニメーションの効果を実現できます。異なる属性の変化を設定し、変化時間と遅延時間をマスターすることで、アニメーションを順番に並べることができます。

要約する

上記は私が紹介した CSS メニュー ボタン アニメーションです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。

<<:  IE6 スペースバグ修正方法

>>:  Dockerはコンテナポートバインディングのローカルポートを実装します

推薦する

Dockerコンテナとローカルマシン間でファイルを転送する方法

ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...

MySQL の簡単な分析 - MVCC

バージョンチェーンInnoDB エンジン テーブルでは、クラスター化インデックス レコードに 2 つ...

Dockerボリュームマウントの実装方法

最も単純な hello world 出力イメージを作成することは最も簡単なスタートですが、実行中のコ...

Vue3.0はvue-grid-layoutプラグインを使用してドラッグレイアウトを実装します。

目次1. プラグイン2. 幕間3. 実装4. 検証機能1. プラグインまず、私たちが選んだプラグイン...

JavaScript の 50 以上のユーティリティ関数の概要

JavaScript は多くの素晴らしい機能を備えています。この記事では、作業効率の向上とコードのデ...

Vueは書籍ショッピングカートの機能を実現

この記事の例では、書籍ショッピングカート機能を実現するためのVueの具体的なコードを参考までに共有し...

Linux ファイアウォールの状態確認方法の例

Linuxファイアウォールの状態を確認する方法1. 基本操作 # ファイアウォールのステータスを表示...

CSS3 で less のテキストの長い影を実装する

この記事では主に、CSS3 LESS で長いテキストの影を実装する方法を紹介し、皆さんと共有します。...

MySql 最適化のための my.ini 中国語構成スキームの詳細な説明: InnoDB、4GB メモリ、および複数のクエリ

この記事は、4G メモリ システム用の MySQL 構成ファイル ソリューションです (主に Inn...

nginx/apache 静的リソースのクロスドメインアクセスの問題を解決する詳細な説明

1. Apache 静的リソースのクロスドメイン アクセスApache設定ファイルhttpd.con...

見落とされがちなMETAタグの特殊効果(ページ遷移効果)

Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...

アイデアをDockerに接続してワンクリックでデプロイする方法

1. docker設定ファイルを変更し、ポート2375を開きます。 [root@s162 docke...

Dockerコンテナのネットワークポート設定プロセスの詳細な説明

ネットワークポートの公開実際、Docker にはネットワーク ポートの公開に関わる 2 つのパラメー...

a タグをクリックして入力ファイルのアップロードダイアログボックスを表示する方法

htmlコードをコピーコードは次のとおりです。 <SPAN class=tag><...