liang14658fox

Appearance

信息输入错误激活抖动动画 ​

html
<div>
	在输入错误信息时，input会抖动
<input type="text" placeholder="只能输入数字" pattern="[0-9]"/>
</div>
<div>
	在输入错误信息时，input会抖动
<input type="text" placeholder="只能输入数字" pattern="[0-9]"/>
</div>
css
/* 使用@keyframes定义一个名为shake的动画 */
@keyframes shake {
	0%{
		margin-left: 0;
	}
	25%{
		margin-left: 0.5rem;
	}
	50%{
		margin-left: 0;
	}
	75%{
		margin-left: -0.5rem;;
	}
	100%{
		margin-left: 0;
	}
}
/* 使用input:invalid在验证失败时，应用这个动画 */
input:invalid{
	color: red;
	/* animation设置为shake，让动画重复执行两次 */
	animation: shake 0.2s ease-in-out 0s 2;
}
/* 使用@keyframes定义一个名为shake的动画 */
@keyframes shake {
	0%{
		margin-left: 0;
	}
	25%{
		margin-left: 0.5rem;
	}
	50%{
		margin-left: 0;
	}
	75%{
		margin-left: -0.5rem;;
	}
	100%{
		margin-left: 0;
	}
}
/* 使用input:invalid在验证失败时，应用这个动画 */
input:invalid{
	color: red;
	/* animation设置为shake，让动画重复执行两次 */
	animation: shake 0.2s ease-in-out 0s 2;
}