用css3实现当鼠标移动到div时 ， div抖动
工具/原料

【css3实现抖动效果】

首先 ， 新建一个只有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更细化 ， 比如下图 ， 这样就能抖起来了 。

• “挤”进体制却慌忙逃离？基层单位如何实现人岗适配
• 副业|2022年女生做什么副业可以实现财富自由
• 愿望的实现读后感如何写？
• 手机|3K能让年轻人实现手机自由吗
• 我能实现我的理想作文500字_我的理想作文怎么写？
• 泰戈尔愿望的实现读后感范文有没有？
• 实现梦想的作文怎么写？
• 区新一年的工作计划如何写？
• 悦读怎么写？
• 有关实现梦想的诗词