Der Implementierungscode des CSS3-Eingabefelds ähnelt dem Animationseffekt der Google-Anmeldung

Verwenden Sie CSS3, um das Eingabefeld ähnlich der Google-Anmeldeseite zu animieren

Effekt 1

Bildbeschreibung hier einfügen

Der Code lautet wie folgt

CSS

Körper{
    Hintergrundfarbe: #acacac;
  }
  .form-container{
    Anzeige: Block;
    Position: relativ;
    Breite: 400px;
    Höhe: 400px;
    Hintergrund: #fff;
    Rand: 50px automatisch;
    Polsterung: 30px;
  }

  Eingang{
    Anzeige: Block;
    Position: relativ;
    Hintergrund: keiner;
    Rand: 2px durchgezogen #acacac;
    Rahmenradius: 5px;
    Breite: 100 %;
    Schriftstärke: fett;
    Polsterung links: 10px;
    Schriftgröße: 16px;
    Höhe: 35px;
    Z-Index: 1;
  }

  Etikett{
    Anzeige: Inline-Block;
    Position: relativ;
    oben: -32px;
    links: 10px;
    Farbe: #acacac;
    Schriftgröße: 16px;
    Z-Index: 2;
    Übergang: alle 0,2 s Ausklang;
  }

  Eingabe:Fokus, Eingabe:gültig{
    Gliederung: keine;
    Rand: 2px durchgezogen #00aced;
  }

  Eingabe: Fokus + Label, Eingabe: gültig + Label{
    oben: -50px;
    Schriftgröße: 16px;
    Farbe: #00aced;
    Hintergrundfarbe: #fff;
  }

HTML

<div Klasse="Haupt">
    <div Klasse="Formularcontainer">
      <input type="text" name="input1" erforderlich>
      <label for="input1">Konto</label>

      <input type="text" name="input2" erforderlich>
      <label for="input2">Passwort</label>
    </div>
  </div>

Effekt 2

Bildbeschreibung hier einfügen

Der Code lautet wie folgt:

CSS

Körper{
    Hintergrundfarbe: #acacac;
  }
  .form-container{
    Anzeige: Block;
    Position: relativ;
    Breite: 400px;
    Hintergrund: #fff;
    Rand: 50px automatisch;
    Polsterung: 60px;
  }

  Eingang{
    Anzeige: Block;
    Position: relativ;
    Hintergrund: keiner;
    Rand: keiner;
    Rahmen unten: 1px durchgezogen #ddd;
    Breite: 100 %;
    Schriftstärke: fett;
    Schriftgröße: 16px;
    Z-Index: 2;
  }

  Etikett{
    Anzeige: Block;
    Position: relativ;
    oben: -20px;
    links: 0px;
    Farbe: #999;
    Schriftgröße: 16px;
    Z-Index: 1;
    Übergang: alle 0,3 s Ausklang;
    Rand unten: 40px;
  }

  Eingabe:Fokus, Eingabe:gültig{
    Gliederung: keine;
    Rahmen unten: 1px durchgezogen #00aced;
  }

  Eingabe: Fokus + Label, Eingabe: gültig + Label{
    oben: -50px;
    Schriftgröße: 16px;
    Farbe: #00aced;
    Hintergrundfarbe: #fff;
  }

HTML

<div Klasse="Haupt">
    <div Klasse="Formularcontainer">
      <input type="text" name="input1" erforderlich>
      <label for="input1">Konto</label>
      <input type="text" name="input2" erforderlich>
      <label for="input2">Passwort</label>
    </div>
  </div>

Zusammenfassen

Damit ist dieser Artikel über den Implementierungscode des CSS3-Eingabefelds mit Animationseffekten ähnlich der Google-Anmeldung abgeschlossen. Weitere verwandte Inhalte zum CSS3-Eingabefeld finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: 10 Aspekte, die beim Entwurf und Aufbau einer umfangreichen Website-Architektur berücksichtigt werden müssen

>>: Einfaches Verständnis und Beispiele für MySQL Index Pushdown (ICP)