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

体{
    背景色:#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;
  }

<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>

体{
    背景色:#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;
  }

<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>