Тряска при недействительном вводе

Введение

В этом практическом занятии мы изучим анимации CSS и псевдо-классы, чтобы создать эффект проверки ввода. В частности, мы создадим анимацию тряски при недействительном вводе с использованием ключевых кадров и псевдо-класса :invalid. Это практическое занятие поможет вам улучшить навыки в CSS и научиться добавлять динамичные и привлекательные эффекты на ваши веб-страницы.

Тряска при недействительном вводе

В ВМ уже предоставлены index.html и style.css.

Чтобы создать анимацию тряски при недействительном вводе, следуйте шагам:

1. Используйте атрибут pattern, чтобы определить регулярное выражение, которое задает допустимый ввод. Например, используйте [A-Za-z]*, чтобы разрешить только буквы.
2. Определите анимацию тряски с использованием @keyframes. Установите свойство margin-left, чтобы сдвинуть ввод влево и вправо.
3. Используйте псевдо-класс :invalid, чтобы применить анимацию тряски к вводу.
4. По желанию добавьте красную тень вокруг ввода, чтобы показать ошибку.

Вот пример кода:

<input type="text" placeholder="Letters only" pattern="[A-Za-z]*" />

@keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 0.5rem;
  }
  75% {
    margin-left: -0.5rem;
  }
  100% {
    margin-left: 0rem;
  }
}

input:invalid {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.6rem #ff0000;
}

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие "Тряска при недействительном вводе". Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.