在无效输入时抖动
在无效输入时创建一个抖动动画。
- 使用
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;
}