[分享]css3实现图片上下抖动

CSS3是一种非常强大的技术，它可以实现很多炫酷的效果。在这里，我们将学习如何使用CSS3实现图片上下抖动的效果。首先，我们需要使用以下的HTML代码来创建一个图片：接下来，我们需要使用CSS3代码来...

CSS3是一种非常强大的技术，它可以实现很多炫酷的效果。在这里，我们将学习如何使用CSS3实现图片上下抖动的效果。首先，我们需要使用以下的HTML代码来创建一个图片：

<img src="picture.jpg" alt="picture">

接下来，我们需要使用CSS3代码来为这个图片添加上下抖动的效果。我们可以通过下面的代码来实现：

img {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-10px);
  }
  40% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(-10px);
  }
  80% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
} 

以上代码使用了CSS3的动画技术。我们定义了一个名为“shake”的动画，它会让图片在0.5秒内上下抖动，并且无限循环。在动画关键帧中，我们使用了“translateY”属性来让图片在垂直方向上移动。我们在不同的关键帧中调整了它的位置，以实现抖动的效果。

现在我们已经成功地使用了CSS3实现了图片上下抖动的效果。你可以根据自己的需要进行调整，比如改变抖动的速度、幅度等。感谢您阅读本文，希望它能对您有所帮助！