比如说用户的未输入密码就点击登录按钮,则输入框会晃动一下提示用户需要输入,实现这种效果很简单,只需要给元素添加一个类,然后做一个关键帧动画即可
css代码
.shake {
animation: shake 800ms ease-in-out;
}
@keyframes shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(+2px, 0, 0); }
30%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(+4px, 0, 0); }
50% { transform: translate3d(-4px, 0, 0); }
}
js代码
function shake(elemId) {
let elem = document.getElementById(elemId)
if (elem) {
elem.classList.add('shake')
setTimeout(() => { elem.classList.remove('shake') }, 800)
}
}
// 当点击某个元素时抖动
$("#div_input_qr").click(function () {
shake("div_input_qr")
})