CSS3 动画实现 div 盒子下方缓慢跳动

可以使用 CSS3 的动画效果来实现 div 盒子在下方缓慢跳动。

首先，需要定义一个带有动画效果的 CSS 类，例如：

.bounce {
  animation-name: bounce;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(20px);
  }
  60% {
    transform: translateY(10px);
  }
}

然后，在需要跳动的 div 盒子上添加该类即可：

<div class="box bounce"></div>

这样，这个 div 盒子就会在下方缓慢跳动起来了。可以调整 animation-duration 属性来改变动画的速度，也可以调整 keyframes 中的 transform 属性来改变跳动的幅度和频率。