让图片动起来！使用 CSS 动画实现图片跳动效果

想要让图片元素跳动起来？这可以通过 CSS 动画来实现。下面是示例代码：

img:hover {
  animation: jump 0.5s infinite;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

这段代码会在鼠标悬停在图片元素上时触发动画，使图片元素上下跳动。通过修改animation属性和@keyframes规则，可以调整动画的持续时间、重复次数、跳动高度等参数。例如，你可以将 0.5s 改为 1s 来延长动画时间，或者将 -20px 改为 -30px 来增加跳动高度。

通过灵活运用 CSS 动画，你可以轻松为你的网页添加各种动态效果，提升用户体验。