前端怎么实现div盒子上下跳动

可以使用 CSS3 的动画效果来实现 div 盒子上下跳动。

1. 首先，定义一个 div 盒子，并设置其位置和样式：

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

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

2. 然后，使用 CSS3 的动画效果来让盒子上下跳动：

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  animation: jump 1s infinite;
  animation-direction: alternate;
}

@keyframes jump {
  0% {
    top: 0;
  }
  100% {
    top: 20px;
  }
}

这段代码定义了一个名为 jump 的动画，让盒子从初始位置（top: 0）跳到距离顶部 20px 的位置（top: 20px），然后再跳回来。使用 animation 属性将动画应用到盒子上，并设置 animation-direction 属性为 alternate，使动画来回播放。最后，使用 infinite 关键字让动画无限循环播放