成品直播源码推荐,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点击让窗口抖动动画效果,更多内容欢迎关注之后的文章
标签:translate3d,动画,transform,js,点击,源码,shake From: https://www.cnblogs.com/yunbaomengnan/p/17390865.html