用css做一个功能小球

可以使用 CSS3 中的 `animation` 属性来实现一个功能小球的效果。以下是一个示例代码：

HTML:

<div class="ball"></div>

CSS:

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  animation: jump 1s infinite;
}

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

解释：

- `width` 和 `height` 分别设置小球的宽度和高度。
- `border-radius` 设置小球的圆角，使其呈现圆形。
- `background-color` 设置小球的背景颜色。
- `animation` 属性指定小球的动画效果，`jump` 是动画的名称，`1s` 是动画的持续时间，`infinite` 表示动画无限循环。
- `@keyframes` 定义动画的关键帧，`jump` 是动画名称与 `animation` 中的名称对应，`transform: translateY(-100px)` 表示小球在动画中向上移动 100px。

通过以上代码，就可以实现一个简单的功能小球效果。