CSS3入力ボックスの実装コードはGoogleログインのアニメーション効果に似ています

CSS3入力ボックスの実装コードはGoogleログインのアニメーション効果に似ています

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 カラービューア

この記事では、カラービューアを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...

Vue で $attrs と $listeners を使用するチュートリアル

目次導入例要約する導入$属性すべての親コンポーネントのプロパティを継承します (props を通じて...

UIエンジニアのキャリアについての私たちの考え

私は長い間落ち込んでいます、なぜでしょうか?以前、お客様から、提供されたソフトウェアが正常に動作しな...

jsBridgeの動作メカニズムを1つの記事で学ぶ

目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...

Tomcat の設定と Eclipse での起動方法

目次Tomcat8のインストールと設定方法tomcat ダウンロードTomcat マネージャーを有効...

シンプルなビデオ連射機能を実装する JavaScript CSS3

この記事では、最も単純なビデオ連射機能をシミュレートするデモを作成します。アイデア:再生する動画と同...

HTML、CSS、RSSフィードが正しいかどうかを確認する無料ツール

この種のエラーに対処するための 1 つの方法は、まずマークアップとスタイルシートを検証することです。...

Linux でディスクをマウントし、起動時に自動的にマウントするように設定する方法

皆さんの時間は貴重だと承知しているので、プロセス コマンドを直接書き留めておきます。設定できます。原...

WeChatアプレットにおけるデータ保存実装方法

目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...

CSS の高度な使い方(実戦で活用)

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...

Linux の一般的な Java プログラム起動スクリプトのコード例

シェルを起動する頻度は非常に低いですが。 。 。しかし、書くたびに、多くの jar ファイル パスを...

ウェブページを最適化してメモリとCPUの使用率を削減

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

WeChatアプレットがテキストスクロールを実装

この記事の例では、WeChatアプレットでテキストスクロールを実装するための具体的なコードを参考まで...

Div はフラッシュを覆います。フラッシュ透過方式により、フラッシュ上に DIV レイヤーを配置できます。

2つのタイプがあります: (異なるブラウザ) 1. IEブラウザで利用可能コードをコピーコードは次の...

MySQL 入門 - 概念

1. それは何ですか? MySQL は最も人気のあるリレーショナル データベース管理システムです。W...