直播电商平台开发，点击让窗口抖动动画效果

直播电商平台开发，点击让窗口抖动动画效果

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")
})

 

 以上就是直播电商平台开发，点击让窗口抖动动画效果的全部代码，更多内容请关注之后的文章