Создание интерактивной формы с анимациями

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

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

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

Список тем

Эффект фокуса на поле ввода

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

CSS
.styled-input {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  /* Добавьте плавный переход для цвета рамки */
  input1: border-color 0.3s ease;
}

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

Анимация кнопки при наведении

Добавьте эффект для кнопки отправки формы: при наведении курсора мыши кнопка должна плавно изменять свой фоновый цвет и немного смещаться вверх.

CSS
.submit-button {
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  /* Добавьте переход для фона и трансформации */
  input1: background-color 0.3s ease, input2 0.3s ease;
}

.submit-button:input3 {
  background-color: #218838;
  /* Смещение кнопки вверх */
  transform: translateY(-3px);
}
HTML
<form>
  <button type="submit" class="submit-button">Отправить</button>
</form>
Используйте псевдокласс `:hover` для стилизации кнопки при наведении. Примените свойство `transition` к основному стилю кнопки, указав анимируемые свойства (`background-color`, `transform`) и длительность перехода. Для смещения вверх используйте `transform: translateY(-значение);`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

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

CSS
.form-group {
  position: relative;
  margin-top: 30px;
}

.form-input {
  width: calc(100% - 20px);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.form-label {
  position: absolute;
  left: 10px;
  top: 10px;
  color: #999;
  pointer-events: none;
  /* Плавный переход для свойств top, font-size, color */
  input1: all 0.2s ease-out;
}

/* Когда инпут в фокусе ИЛИ не пустой, применяем стиль к соседней метке */
.form-input:input2 + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
  top: -20px;
  font-size: 12px;
  color: #007bff;
}

/* Добавляем плейсхолдер, но делаем его прозрачным, чтобы не мешал метке */
.form-input::placeholder {
  color: transparent;
}
HTML
<div class="form-group">
  <input type="text" id="email" class="form-input" placeholder="Email">
  <label for="email" class="form-label">Email</label>
</div>
Оберните label и input в контейнер с `position: relative;`. Задайте `label` `position: absolute;`, разместите его поверх `input`. Используйте `transition` для свойств `top`, `font-size`, `color`. Стиль для активного состояния метки (перемещение вверх и уменьшение) применяйте, когда `input` находится в фокусе (`:focus`) или когда он не пустой и не является плейсхолдером (`:not(:placeholder-shown)`). Используйте селектор `input:focus + label` или `input:not(:placeholder-shown) + label`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Индикация обязательных полей

Стилизуйте обязательные для заполнения поля. Добавьте красную рамку для пустых обязательных полей и зеленую для заполненных и валидных. Используйте псевдоклассы для отслеживания состояния полей.

CSS
input {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  input1: border-color 0.3s ease;
}

/* Стиль для обязательных полей, которые невалидны (например, пустые) */
input:input2:invalid {
  border-color: #dc3545; /* Красный */
}

/* Стиль для обязательных полей, которые валидны */
input:input3:valid {
  border-color: #28a745; /* Зеленый */
}

/* Убираем стандартную обводку при фокусе */
input:focus {
  outline: none;
}
HTML
<form>
  <label for="req-field">Обязательное поле:</label>
  <input type="text" id="req-field" required placeholder="Нужно заполнить">

  <label for="email-field">Email (обязательно):</label>
  <input type="email" id="email-field" required placeholder="Введите email">

  <label for="opt-field">Необязательное поле:</label>
  <input type="text" id="opt-field" placeholder="Можно оставить пустым">
</form>
Используйте атрибут `required` в HTML для полей. В CSS используйте псевдокласс `:required` для выбора обязательных полей. Для стилизации невалидных (пустых или не соответствующих типу, например, email) используйте `:invalid`. Для валидных используйте `:valid`. Добавьте `transition` для `border-color`, чтобы смена цвета была плавной.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Анимация 'встряхивания' при невалидном вводе

Добавьте анимацию 'встряхивания' для поля ввода, когда оно является обязательным, но остается пустым или содержит невалидные данные (например, неверный формат email). Анимация должна срабатывать при потере фокуса или попытке отправки формы.

CSS
/* Определяем анимацию встряхивания */
input1 shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

input {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

input:focus {
  outline: none;
}

/* Применяем анимацию к невалидным обязательным полям */
input:required:invalid {
  border-color: #dc3545;
  /* Укажите имя анимации, длительность и способ воспроизведения */
  input2: shake 0.5s ease-in-out;
}

input:required:valid {
  border-color: #28a745;
}
HTML
<form>
  <label for="shaky-email">Email (обязательно):</label>
  <input type="email" id="shaky-email" required placeholder="Попробуйте ввести неверный email">
  <button type="submit">Отправить</button>
</form>
Определите анимацию с помощью `@keyframes`, назовите ее, например, `shake`. Внутри анимации используйте `transform: translateX()` с небольшими смещениями влево и вправо на разных процентах времени. Примените эту анимацию к селектору `input:required:invalid` с помощью свойства `animation`. Убедитесь, что анимация не зациклена.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация и анимация кастомного чекбокса

Скройте стандартный чекбокс и создайте собственный с помощью псевдоэлементов `::before` и `::after` для элемента `label`. Добавьте плавную анимацию появления 'галочки' при выборе чекбокса.

CSS
.custom-checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 18px;
  user-select: none; /* Запретить выделение текста метки */
}

/* Скрываем стандартный чекбокс */
.custom-checkbox-container input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Создаем рамку кастомного чекбокса */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  input1: background-color 0.2s ease;
}

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

/* Меняем фон рамки при выборе чекбокса */
.custom-checkbox-container input[type="checkbox"]:checked ~ .checkmark {
  background-color: #007bff;
  border-color: #007bff;
}

/* Создаем галочку (скрыта по умолчанию) */
.checkmark::after {
  content: "";
  position: absolute;
  display: none; /* Будет изменено при :checked */
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  /* Анимация появления галочки */
  input2: all 0.2s ease-in-out;
}

/* Показываем и анимируем галочку при выборе чекбокса */
.custom-checkbox-container input[type="checkbox"]:input3 ~ .checkmark::after {
  display: block;
  transform: rotate(45deg) scale(1);
  opacity: 1;
}
HTML
<label class="custom-checkbox-container">Согласен с условиями
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="custom-checkbox-container">Подписаться на рассылку
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
Скройте `input[type="checkbox"]` (например, с помощью `position: absolute; opacity: 0;`). Стилизуйте `label` и его псевдоэлемент `::before` для создания рамки чекбокса. Используйте псевдоэлемент `::after` для 'галочки' (можно использовать `border` или `content` с символом). Сделайте `::after` изначально невидимым (`opacity: 0`, `transform: scale(0)`). Примените `transition` к `::after`. Используйте селектор `input[type="checkbox"]:checked + label::after` для отображения 'галочки' при выборе чекбокса.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру