成品直播源码推荐，js点击让窗口抖动动画效果

成品直播源码推荐，js点击让窗口抖动动画效果

比如说用户的未输入密码就点击登录按钮，则输入框会晃动一下提示用户需要输入，实现这种效果很简单，只需要给元素添加一个类，然后做一个关键帧动画即可

css代码

 

1

<br>.shake {<br>     animation: shake 800ms ease-in-out;<br> }<br>@keyframes shake {<br>    10%, 90% { transform: translate3d(-1px, 0, 0); }<br>    20%, 80% { transform: translate3d(+2px, 0, 0); }<br>    30%, 70% { transform: translate3d(-4px, 0, 0); }<br>    40%, 60% { transform: translate3d(+4px, 0, 0); }<br>    50% { transform: translate3d(-4px, 0, 0); }<br>}<br>

​

js代码

 

1

<br>function shake(elemId) {<br>    let elem = document.getElementById(elemId)<br>    if (elem) {<br>        elem.classList.add('shake')<br>        setTimeout(() => { elem.classList.remove('shake') }, 800)<br>    }<br>}<br>// 当点击某个元素时抖动<br>$("#div_input_qr").click(function () {<br>    shake("div_input_qr")<br>})

 

 以上就是 成品直播源码推荐，js点击让窗口抖动动画效果，更多内容欢迎关注之后的文章