Как сделать - Анимированный поиск
Узнать, как создать анимированную форму поиска с помощью CSS.
Анимированный поиск
Нажмите на поле ввода:
Создать анимированный поиск
Шаг 1) Добавить HTML:
Пример
<input type="text" name="search" placeholder="Поиск..">Шаг 2) Добавить CSS:
Пример
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* Когда поле ввода получает фокус, измените его ширину на 100% */
input[type=text]:focus {
width: 100%;
}Редактор кода »Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.
Зайдите на наш учебник CSS Форма, чтобы узнать больше о том, как создавать HTML-формы.
