成品直播原始碼推薦，js點選讓視窗抖動動畫效果

成品直播原始碼推薦，js點選讓視窗抖動動畫效果

比如說使用者的未輸入密碼就點選登入按鈕，則輸入框會晃動一下提示使用者需要輸入，實現這種效果很簡單，只需要給元素新增一個類，然後做一個關鍵幀動畫即可

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

 以上就是 成品直播原始碼推薦，js點選讓視窗抖動動畫效果，更多內容歡迎關注之後的文章