Тряска при недействительном вводе: Взрывные CSS-анимации для валидации веб-страниц

Введение

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/DynamicStylingGroup -.-> css/animations("Animations") css/CSSPreprocessorsGroup -.-> css/mixins("Mixins") subgraph Lab Skills css/selectors -.-> lab-35237{{"Тряска при недействительном вводе"}} css/colors -.-> lab-35237{{"Тряска при недействительном вводе"}} css/box_model -.-> lab-35237{{"Тряска при недействительном вводе"}} css/margin_and_padding -.-> lab-35237{{"Тряска при недействительном вводе"}} css/animations -.-> lab-35237{{"Тряска при недействительном вводе"}} css/mixins -.-> lab-35237{{"Тряска при недействительном вводе"}} end

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

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

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

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

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

<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, чтобы улучшить свои навыки.