CSS3を使用して、Googleログインページと同様の入力ボックスをアニメーション化します。 効果1 コードは次のとおりです CS 体{ 背景色:#acacac; } .フォームコンテナ{ 表示: ブロック; 位置: 相対的; 幅: 400ピクセル; 高さ: 400px; 背景: #fff; マージン: 50px 自動; パディング: 30px; } 入力{ 表示: ブロック; 位置: 相対的; 背景: なし; 境界線: 2px 実線 #acacac; 境界線の半径:5px; 幅: 100%; フォントの太さ: 太字; パディング左:10px; フォントサイズ: 16px; 高さ:35px; zインデックス: 1; } ラベル{ 表示: インラインブロック; 位置: 相対的; 上: -32px; 左: 10px; 色: #acacac; フォントサイズ: 16px; zインデックス: 2; 遷移: すべて 0.2 秒のイーズアウト。 } 入力:フォーカス、入力:有効{ アウトライン: なし; 境界線: 2px 実線 #00aced; } 入力:フォーカス + ラベル、入力:有効 + ラベル{ 上: -50px; フォントサイズ: 16px; 色: #00aced; 背景色:#fff; } html <div class="main"> <div class="フォームコンテナ"> <input type="text" name="input1" が必要です> <label for="input1">アカウント</label> <input type="text" name="input2" が必要です> <label for="input2">パスワード</label> </div> </div> 効果2 コードは次のとおりです。 CS 体{ 背景色:#acacac; } .フォームコンテナ{ 表示: ブロック; 位置: 相対的; 幅: 400ピクセル; 背景: #fff; マージン: 50px 自動; パディング: 60px; } 入力{ 表示: ブロック; 位置: 相対的; 背景: なし; 境界線: なし; 下境界線: 1px 実線 #ddd; 幅: 100%; フォントの太さ: 太字; フォントサイズ: 16px; zインデックス: 2; } ラベル{ 表示: ブロック; 位置: 相対的; 上: -20px; 左: 0px; 色: #999; フォントサイズ: 16px; zインデックス: 1; 遷移: すべて 0.3 秒のイーズアウト。 下マージン:40px; } 入力:フォーカス、入力:有効{ アウトライン: なし; 下部境界線: 1px 実線 #00aced; } 入力:フォーカス + ラベル、入力:有効 + ラベル{ 上: -50px; フォントサイズ: 16px; 色: #00aced; 背景色:#fff; } html <div class="main"> <div class="フォームコンテナ"> <input type="text" name="input1" が必要です> <label for="input1">アカウント</label> <input type="text" name="input2" が必要です> <label for="input2">パスワード</label> </div> </div> 要約する これで、Google ログインのようなアニメーション効果を持つ CSS3 入力ボックスの実装コードに関するこの記事は終了です。CSS3 入力ボックスに関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: 大規模なウェブサイトアーキテクチャを設計・構築する際に考慮すべき10の課題
>>: MySQL インデックス プッシュダウン (ICP) の簡単な理解と例
この記事では、カラービューアを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...
目次導入例要約する導入$属性すべての親コンポーネントのプロパティを継承します (props を通じて...
私は長い間落ち込んでいます、なぜでしょうか?以前、お客様から、提供されたソフトウェアが正常に動作しな...
目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...
目次Tomcat8のインストールと設定方法tomcat ダウンロードTomcat マネージャーを有効...
この記事では、最も単純なビデオ連射機能をシミュレートするデモを作成します。アイデア:再生する動画と同...
この種のエラーに対処するための 1 つの方法は、まずマークアップとスタイルシートを検証することです。...
皆さんの時間は貴重だと承知しているので、プロセス コマンドを直接書き留めておきます。設定できます。原...
目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...
1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...
シェルを起動する頻度は非常に低いですが。 。 。しかし、書くたびに、多くの jar ファイル パスを...
一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...
この記事の例では、WeChatアプレットでテキストスクロールを実装するための具体的なコードを参考まで...
2つのタイプがあります: (異なるブラウザ) 1. IEブラウザで利用可能コードをコピーコードは次の...
1. それは何ですか? MySQL は最も人気のあるリレーショナル データベース管理システムです。W...