1、首先,新建一个只有div的页面,并加上适当的样式


2、抖动效果需要用到animation属性,首先先加一个keyframes,我用的是chrome浏览器所以要加上-webkit前缀@-webkit-keyframes buzz-out { 0% { -webkit-transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); }}0% 是动画的开始时间,而100% 动画的结束时间。

3、然后加上hover#buzz:hover { -webkit-animation-name: buzz-out; -webkit-animation-duration: 0.75s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1;}

4、然后当鼠标移到div上就会看到有摇晃的效果

5、如何实现抖动?就要把@-webkit-keyframes buzz-out更细化,比如下图,这样就能抖起来了。
