CSS3 动画和 JavaScript 实现 div 盒子缓慢跳动效果

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

CSS3 动画

首先，在 CSS 中定义一个动画，例如：

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

这个动画会使元素在 50% 的时候向下移动 20 像素，然后再回到原来的位置。

然后，在需要跳动的元素上应用这个动画：

.box {
  animation: jump 1s infinite;
}

这个元素会在 1 秒钟内完成一次跳动，并且会无限循环。

JavaScript

首先，在 JavaScript 中获取需要跳动的元素：

var box = document.querySelector('.box');

然后，使用 setInterval() 函数来定时改变元素的位置：

var interval = setInterval(function() {
  var top = parseInt(box.style.top) || 0;
  if (top === 0) {
    box.style.top = '20px';
  } else {
    box.style.top = '0';
  }
}, 1000);

这个函数会每 1 秒钟检查一次元素的位置，并且根据当前位置来改变元素的位置。如果元素在原来的位置，就将它向下移动 20 像素；如果元素已经在下方，就将它移回原来的位置。

需要注意的是，这种方法会改变元素的位置，可能会影响到其他元素的布局。如果需要避免这种影响，可以使用 CSS3 动画或者使用绝对定位来实现。