Wie man erstellt: animierter Suchfelder
Lernen Sie, wie man mit CSS animierte Suchformulare erstellt.
Klicken Sie auf das Eingabefeld:
Wie man einen animierten Suchfelder erstellt
Schritt 1 - HTML hinzufügen:
<input type="text" name="search" placeholder="Suche..">
Schritt 2 - CSS hinzufügen:
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* Wenn das Eingabefeld den Fokus erhält, ändert es seine Breite auf 100% */
input[type=text]:focus {
width: 100%;
}
相关页面
教程：HTML 表单
教程：CSS 表单
