1.给它加个样式
margin-left:3px; //看起来没有用,但是动画可以用它来调位置
2.在你需要它动的事件里面给它加个动画class,比如click,mouseover什么的
document.getElementsByClassName(el)[0].classList.add('shacking')
setTimeout(()=>{
document.getElementsByClassName(el)[0].classList.remove('shacking')
},600)
3.给shacking加个动画
.shacking{
/* 添加显示时的抖动效果 */
animation: shake 0.6s ease-in-out;
}
/* 定义抖动动画的关键帧 */
/*左3到左0,不就是右敲击吗嗷嗷嗷*/
@keyframes shake {
0% { margin-left: 3px; }
25%{ margin-left: 0px; }
50% { margin-left: 3px; }
75% { margin-left: 0px; }
100% { margin-left: 3px; }
}