[分享]css写div鼠标经过颤动

CSS是网站制作中不可缺少的重要元素。它可以让我们的网站更加美观、优雅。其中，通过CSS让Div鼠标经过颤动效果，可以增加页面的交互性，让用户更加有趣。/ CSS代码 / div:hover { an...

CSS是网站制作中不可缺少的重要元素。它可以让我们的网站更加美观、优雅。其中，通过CSS让Div鼠标经过颤动效果，可以增加页面的交互性，让用户更加有趣。

/* CSS代码 */
div:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(5px, 5px); }
  50% { transform: translate(0, 10px); }
  75% { transform: translate(-5px, 5px); }
  100% { transform: translate(0, 0); }
} 

上面是实现鼠标经过Div颤动的CSS代码。首先，使用:hover伪类选择器，当鼠标经过Div时触发事件。然后，使用animation属性来实现颤动动画，动画时间设置为0.5秒。animation-iteration-count属性设置为infinite，表示动画无限循环播放。

接下来，通过@keyframes来定义动画过程。其中，0%表示动画开始时刻，100%表示动画结束时刻。在动画过程中，通过transform属性来设置Div的位移，从而实现颤动效果。

总之，通过这种简单的CSS代码，就可以实现鼠标经过Div颤动效果，让页面更加生动有趣。