用css3实现当鼠标移动到div时，div抖动

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

抖动效果需要用到animation属性，首先先加一个keyframes，我用的是chrome浏览器所以要加上-webkit前缀

@-webkit-keyframes buzz-out {

0% {

-webkit-transform: translateX(3px) rotate(2deg);

}

100% {

-webkit-transform: translateX(-3px) rotate(-2deg);

}

}

0% 是动画的开始时间，而100% 动画的结束时间。

然后加上hover

#buzz:hover {

-webkit-animation-name: buzz-out;

-webkit-animation-duration: 0.75s;

-webkit-animation-timing-function: linear;

-webkit-animation-iteration-count: 1;

}

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

如何实现抖动？

就要把@-webkit-keyframes buzz-out更细化，比如下图，这样就能抖起来了。