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イメージのローカル移行の実装

最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...

JavaScriptはすべての選択と選択解除の操作を実装します

この記事では、JavaScriptで全選択と全選択解除の操作を実装するための具体的なコードを参考まで...

MySQLクエリ最適化に必須の知識ポイントのまとめ

序文クエリの最適化は一夜にして達成できるものではありません。対応するツールの使い方を学び、他の人の経...

Centos7 に yum 経由で MySQL をインストールする方法

1. MySQLがインストールされているかどうかを確認する yum インストール済みリスト | gr...

Win10でのJDKのインストールと環境変数の設定に関する詳細なチュートリアル

目次序文1. 準備2. インストール3. 環境変数を設定する1. 「新規」をクリックすると、ポップア...

MySQL sql_modeクエリと設定の詳細な説明

1. SQLを実行して表示する @@session.sql_mode を選択します。 グローバルレベ...

jQueryのanimateアニメーションメソッドとアニメーションキューイング問題の解決方法の詳しい説明

目次animate() アニメーションメソッドアニメーションキューイングdelay() メソッドアニ...

ZabbixはSNMPに基づいてLinuxホストを監視します

序文: Linux ホストは、エージェント プログラムをインストールする場合でも、SNMP を使用す...

CentOS 7 で MySQL 接続数が 214 に制限される問題の解決方法

問題を見つける最近、プロジェクトで問題が発生しました。接続が多すぎるため、「接続が多すぎます」という...

Vue2.0+ElementUI+PageHelperで実装されたテーブルページング機能

序文最近、いくつかのフロントエンド プロジェクトに取り組んでおり、ページにいくつかのテーブルを表示す...

Reactソースコードにおけるビット演算について詳しく説明します

目次序文いくつかの一般的なビット操作ビットAND (&)ビットOR (|)ビット否定(~)マ...

CSS: 訪問した疑似クラスセレクタの秘密の記憶

昨日、a:visited を使用して「Guess You Like」の右側にある訪問済みテキストの色...

Tomcat のインストール後に起こりうる問題の紹介

1. Tomcatサービスが開いていませんブラウザのアドレスバーにlocalhost:8080と入力...

Nginx コンパイル済み nginx - 新しいモジュールを追加

1. 既存のモジュールを表示する nginx の sbin ディレクトリに nginx の sbin...

Mysql varchar型の合計操作例

友人の中には、データベースについて学習しているときに、テーブル構造を作成するときに誤ってフィールドを...