ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリックすることです。以前は画像を使用して置き換えていました。今日は突然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 メニュー ボタン アニメーションです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。 |
>>: Dockerはコンテナポートバインディングのローカルポートを実装します
最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...
この記事では、JavaScriptで全選択と全選択解除の操作を実装するための具体的なコードを参考まで...
序文クエリの最適化は一夜にして達成できるものではありません。対応するツールの使い方を学び、他の人の経...
1. MySQLがインストールされているかどうかを確認する yum インストール済みリスト | gr...
目次序文1. 準備2. インストール3. 環境変数を設定する1. 「新規」をクリックすると、ポップア...
1. SQLを実行して表示する @@session.sql_mode を選択します。 グローバルレベ...
目次animate() アニメーションメソッドアニメーションキューイングdelay() メソッドアニ...
序文: Linux ホストは、エージェント プログラムをインストールする場合でも、SNMP を使用す...
問題を見つける最近、プロジェクトで問題が発生しました。接続が多すぎるため、「接続が多すぎます」という...
序文最近、いくつかのフロントエンド プロジェクトに取り組んでおり、ページにいくつかのテーブルを表示す...
目次序文いくつかの一般的なビット操作ビットAND (&)ビットOR (|)ビット否定(~)マ...
昨日、a:visited を使用して「Guess You Like」の右側にある訪問済みテキストの色...
1. Tomcatサービスが開いていませんブラウザのアドレスバーにlocalhost:8080と入力...
1. 既存のモジュールを表示する nginx の sbin ディレクトリに nginx の sbin...
友人の中には、データベースについて学習しているときに、テーブル構造を作成するときに誤ってフィールドを...