For example, if the user clicks the login button without entering a password, the input box will vibrate to prompt the user to enter. It is very simple to achieve this effect. You only need to add a class to the element, and then make a key frame animation.
css code
.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 code
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")
})