Создание анимированных форм

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Опубликовано 17.03.2025
Просмотры 6
Автор
Рек. время прохождения 5 минут
Упражнений 7
Комментарии 0
Тренажер CSS

Эта серия заданий посвящена созданию интерактивных и привлекательных форм с использованием CSS-анимаций и переходов. Вы попрактикуетесь в стилизации элементов форм в различных состояниях (:focus, :valid, :invalid, :checked), научитесь анимировать метки (labels), кнопки и другие элементы для улучшения пользовательского опыта. Задания построены от простых эффектов при наведении или фокусе до более сложных анимаций кастомных элементов управления, таких как чекбоксы. Вам предстоит заполнить пропущенные части CSS-кода, чтобы оживить статичные HTML-формы.

Список тем

Плавное изменение рамки при фокусе

Сделайте так, чтобы при получении фокуса текстовым полем ввода его рамка плавно меняла цвет. Изначально рамка серая, а при фокусе должна становиться синей. Эффект изменения цвета должен быть анимирован.

CSS
body {
  padding: 20px;
  font-family: sans-serif;
}

.basic-form input[type="text"] {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: calc(100% - 24px); /* Учитываем padding и border */
  box-sizing: border-box;
  /* Добавляем плавный переход для цвета рамки */
  input1: border-color 0.3s ease;
}

.basic-form input[type="text"]input2 {
  border-color: #007bff;
  outline: none; /* Убираем стандартную обводку браузера */
}
HTML
<form class="basic-form">
  <label for="username">Имя пользователя:</label>
  <input type="text" id="username" name="username" placeholder="Введите ваше имя">
</form>
Используйте псевдокласс `:focus` для выбора элемента в состоянии фокуса. Чтобы анимация была плавной, примените свойство `transition` к элементу ввода, указав, какое свойство должно анимироваться (`border-color`) и продолжительность анимации.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Анимация метки (label) при фокусе

Создайте эффект 'плавающей' метки. Когда поле ввода получает фокус или когда в нем уже есть текст, связанная с ним метка должна плавно переместиться вверх и немного уменьшиться.

CSS
body {
  padding: 20px;
  font-family: sans-serif;
}

.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-group input[type="text"] {
  padding: 15px 10px 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: calc(100% - 22px);
  box-sizing: border-box;
}

.form-group label {
  position: absolute;
  left: 10px;
  top: 12px;
  color: #999;
  pointer-events: none;
  input1: all 0.2s ease-out;
}

/* Стиль для активной метки */
.form-group input[type="text"]:focus + label,
.form-group input[type="text"]:not(input2) + label {
  top: 2px;
  font-size: 12px;
  color: #007bff;
  input3: translateY(-50%);
}
HTML
<div class="form-group">
  <input type="text" id="email" name="email" placeholder=" " required>
  <label for="email">Email</label>
</div>
Расположите метку абсолютно внутри родительского контейнера. Используйте `transform: translateY()` и `font-size` для изменения положения и размера метки. Применяйте эти стили, когда поле ввода находится в состоянии `:focus` или когда оно не пустое (используйте `:not(:placeholder-shown)` или аналогичный подход, если плейсхолдер используется). Не забудьте добавить `transition` к метке для плавности.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Эффект масштабирования кнопки при наведении

Добавьте интерактивности кнопке отправки формы. При наведении курсора мыши кнопка должна плавно немного увеличиваться в размере.

CSS
body {
  padding: 20px;
  font-family: sans-serif;
}

.basic-form button {
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #28a745;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block; /* Нужно для transform */
  input1: transform 0.2s ease-in-out;
}

.basic-form buttoninput2 {
  input3: scale(1.1);
}
HTML
<form class="basic-form">
  <button type="submit">Отправить</button>
</form>
Используйте псевдокласс `:hover` для стилизации кнопки при наведении. Примените свойство `transform` со значением `scale()` для изменения масштаба. Чтобы увеличение было плавным, добавьте свойство `transition` к кнопке, указав `transform` в качестве анимируемого свойства и задав длительность.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Визуальная обратная связь для валидации полей

Улучшите форму, добавив немедленную визуальную обратную связь о валидности введенных данных. Если данные в поле корректны (например, email введен правильно), рамка должна стать зеленой. Если некорректны — красной. Используйте HTML5 атрибуты для валидации.

CSS
body {
  padding: 20px;
  font-family: sans-serif;
}

.validation-form input[type="email"] {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: calc(100% - 24px);
  box-sizing: border-box;
  input1: border-color 0.3s ease;
}

/* Стиль для невалидного поля */
.validation-form input[type="email"]input2 {
  border-color: #dc3545; /* Красный */
  outline: none;
}

/* Стиль для валидного поля */
.validation-form input[type="email"]input3 {
  border-color: #28a745; /* Зеленый */
  outline: none;
}
HTML
<form class="validation-form">
  <label for="user-email">Email:</label>
  <input type="email" id="user-email" name="user-email" required placeholder="name@example.com">
</form>
Используйте псевдоклассы `:valid` и `:invalid` для стилизации поля ввода в зависимости от его валидности. Установите соответствующий `border-color` для каждого состояния. Добавьте `transition` для `border-color`, чтобы смена цвета была плавной.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Анимация появления сообщения об ошибке

Сделайте так, чтобы сообщение об ошибке под полем ввода появлялось плавно, когда поле становится невалидным. Сообщение должно 'выезжать' снизу и становиться видимым.

CSS
body {
  padding: 20px;
  font-family: sans-serif;
}

.form-group-error {
  margin-bottom: 10px;
}

.form-group-error input[type="password"] {
  display: block;
  width: calc(100% - 24px);
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  margin-bottom: 5px;
}

.error-message {
  display: block;
  color: #dc3545;
  font-size: 14px;
  input1: 0;
  max-height: 0;
  overflow: hidden;
  input2: opacity 0.3s ease, max-height 0.3s ease;
  /* transform: translateY(-10px); */ /* Можно добавить для эффекта выезда */
}

/* Показываем сообщение, если поле невалидно и было изменено */
.form-group-error input[type="password"]:invalid:not(:placeholder-shown) + input3 {
  input4: 1;
  max-height: 50px; /* Достаточно для отображения текста */
  /* transform: translateY(0); */
}
HTML
<div class="form-group-error">
  <label for="password">Пароль (мин. 6 символов):</label>
  <input type="password" id="password" name="password" required minlength="6">
  <span class="error-message">Пароль должен содержать минимум 6 символов.</span>
</div>
Скройте сообщение об ошибке по умолчанию, установив `opacity: 0`, `max-height: 0` и, возможно, небольшой отрицательный `transform: translateY()`. Используйте соседний селектор (`+` или `~`) и псевдокласс `:invalid` на поле ввода, чтобы стилизовать сообщение об ошибке, когда поле невалидно. В состоянии ошибки установите `opacity: 1`, `max-height` (достаточный для текста) и `transform: translateY(0)`. Добавьте `transition` к сообщению об ошибке для плавности.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Кастомный анимированный чекбокс

Создайте полностью кастомный чекбокс с плавной анимацией отметки при выборе. Стандартный вид чекбокса должен быть скрыт, а вместо него использоваться псевдоэлемент.

CSS
body {
  padding: 20px;
  font-family: sans-serif;
}

.custom-checkbox-container {
  position: relative;
  padding-left: 30px; /* Место для кастомного чекбокса */
  cursor: pointer;
  display: inline-block;
}

.custom-checkbox-container input[type="checkbox"] {
  position: absolute;
  input1: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Создаем кастомный квадрат */
.custom-checkbox-container label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #6c757d;
  background-color: white;
  border-radius: 3px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Стилизуем квадрат при наведении */
.custom-checkbox-container:hover input[type="checkbox"] ~ label::before {
  border-color: #007bff;
}

/* Стилизуем квадрат при выборе */
.custom-checkbox-container input[type="checkbox"]:checked ~ label::before {
  background-color: #007bff;
  border-color: #007bff;
}

/* Создаем галочку (скрыта по умолчанию) */
.custom-checkbox-container label::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  input2: rotate(45deg) scale(0);
  input3: transform 0.2s ease-in-out;
}

/* Показываем галочку при выборе */
.custom-checkbox-container input[type="checkbox"]input4 ~ label::after {
  transform: rotate(45deg) scale(1);
}
HTML
<div class="custom-checkbox-container">
  <input type="checkbox" id="agree" name="agree">
  <label for="agree">Согласен с условиями</label>
</div>
Скройте стандартный чекбокс с помощью `appearance: none` или `opacity: 0` и `position: absolute`. Используйте псевдоэлемент `::before` для создания кастомного квадратика. Для отметки внутри используйте псевдоэлемент `::after`. Стилизуйте `::after` так, чтобы он был скрыт по умолчанию (например, `transform: scale(0)`). Используйте псевдокласс `:checked` на скрытом инпуте и селектор `+` или `~` для стилизации псевдоэлементов, когда чекбокс выбран. Анимируйте появление `::after` (например, через `transform` и `transition`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Анимация загрузки на кнопке

Создайте эффект загрузки на кнопке отправки. При 'нажатии' (используем `:active` для имитации) текст кнопки должен исчезнуть, а на его месте появиться анимированный индикатор загрузки (спиннер).

CSS
body {
  padding: 20px;
  font-family: sans-serif;
}

/* Базовые стили кнопки */
.btn-loading {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.2s ease;
  min-width: 120px; /* Чтобы кнопка не сжималась */
  text-align: center;
}

/* Спиннер (скрыт по умолчанию) */
.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid transparent;
  border-top-color: white;
  border-radius: 50%;
  input1: 0; /* Скрываем спиннер */
  input2: none; /* Анимация пока не нужна */
}

/* Состояние 'загрузки' при нажатии */
.btn-loadinginput3 {
  color: transparent; /* Скрываем текст */
}

.btn-loading:active::after {
  opacity: 1; /* Показываем спиннер */
  input4: spin 1s linear infinite; /* Запускаем анимацию */
}

/* Анимация вращения */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
HTML
<form class="basic-form">
  <button type="submit" class="btn-loading">Отправить</button>
</form>
Используйте псевдоэлемент `::after` на кнопке для создания спиннера (например, с помощью `border` и `border-radius`). Скройте его по умолчанию. В состоянии `:active` скройте текст кнопки (например, `color: transparent`) и покажите спиннер, установив ему нужные стили и запустив анимацию вращения (`@keyframes` и `animation`). Добавьте `transition` для плавного скрытия текста.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру