在无效输入时抖动

在无效输入时创建一个抖动动画。

  • 使用pattern属性定义输入值必须匹配的正则表达式。
  • 使用@keyframes定义一个抖动动画,使用margin-left属性。
  • 使用:invalid伪类应用一个动画,使元素抖动。
 <input type="text" placeholder="仅限字母" 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;
}