ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリックすることです。以前は画像を使用して置き換えていました。今日は突然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はコンテナポートバインディングのローカルポートを実装します
ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...
バージョンチェーンInnoDB エンジン テーブルでは、クラスター化インデックス レコードに 2 つ...
最も単純な hello world 出力イメージを作成することは最も簡単なスタートですが、実行中のコ...
目次1. プラグイン2. 幕間3. 実装4. 検証機能1. プラグインまず、私たちが選んだプラグイン...
JavaScript は多くの素晴らしい機能を備えています。この記事では、作業効率の向上とコードのデ...
この記事の例では、書籍ショッピングカート機能を実現するためのVueの具体的なコードを参考までに共有し...
シェルスクリプト #!/bin/sh # 現在のディレクトリ CURRENT_DIR=$( cd &...
Linuxファイアウォールの状態を確認する方法1. 基本操作 # ファイアウォールのステータスを表示...
この記事では主に、CSS3 LESS で長いテキストの影を実装する方法を紹介し、皆さんと共有します。...
この記事は、4G メモリ システム用の MySQL 構成ファイル ソリューションです (主に Inn...
1. Apache 静的リソースのクロスドメイン アクセスApache設定ファイルhttpd.con...
Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...
1. docker設定ファイルを変更し、ポート2375を開きます。 [root@s162 docke...
ネットワークポートの公開実際、Docker にはネットワーク ポートの公開に関わる 2 つのパラメー...
htmlコードをコピーコードは次のとおりです。 <SPAN class=tag><...