html中如何设置小球弹跳

在HTML中，可以通过CSS样式来设置小球弹跳效果。

.ball {
  position: relative;
  animation-name: bounce;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

@keyframes bounce {
  0% {
    top: 0;
  }
  50% {
    top: 150px;
  }
  100% {
    top: 0;
  }
}

以上代码中，首先设置小球的位置为相对定位。然后定义一个名为“bounce”的动画，设置动画的时间为1秒，填充模式为both（表示在动画播放前和播放后都应用动画效果），动画缓动函数为ease-in-out（表示动画以慢-快-慢的方式播放）。

在“bounce”动画中，设置动画在开始、中间和结尾三个关键帧的状态。如上代码中所示，小球在初始状态下的top值为0，在50%关键帧时，top值为150px，在100%关键帧时，top值再次恢复为0，实现小球的反向弹跳效果。

通过将以上代码应用于小球的样式表（class），即可实现小球的弹跳效果。