[分享]css3实现图片抖动效果

CSS3是前端开发中不可或缺的技术之一，它提供了很多有趣的动态效果来为网站增加交互性和吸引力。在这篇文章里，我们将学习如何通过CSS3实现图片抖动效果，让网站更加生动活泼。.imgshake { an...

CSS3是前端开发中不可或缺的技术之一，它提供了很多有趣的动态效果来为网站增加交互性和吸引力。在这篇文章里，我们将学习如何通过CSS3实现图片抖动效果，让网站更加生动活泼。

.img-shake {
  animation: shake 0.5s ease-in-out infinite;
}

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

以上代码中，我们使用了CSS3中的animation属性来定义抖动动画，keyframes关键字定义抖动过程中的各个状态。我们通过transform和rotate来实现图片的平移和旋转效果。同时，我们通过设置infinite的属性值来让动画无限播放。

在HTML中，我们只需要将class设置为img-shake，即可为图片添加抖动效果。

<img class="img-shake" src="image.png" alt="image description"> 

通过以上代码，我们可以轻松地实现图片抖动效果，为网站的视觉效果增添趣味性。