CSS3动画实现多个跳动小球（语音输入动画）

/* 定义基本的小球样式 */
.ball {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  animation: bounce-animation 1s infinite alternate;
}
 
/* 定义跳动动画 */
@keyframes bounce-animation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
 
/* 定义不同大小和颜色的小球，通过类名区分 */
.small-ball {
  width: 30px;
  height: 30px;
  background-color: red;
}
 
.medium-ball {
  width: 40px;
  height: 40px;
  background-color: green;
}
 
.large-ball {
  width: 60px;
  height: 60px;
  background-color: purple;
}
 
/* HTML结构 */
<div class="ball small-ball" style="left: 10px;"></div>
<div class="ball medium-ball" style="left: 60px;"></div>
<div class="ball large-ball" style="left: 110px;"></div>

这段代码定义了一个小球的基本样式和跳动动画，并展示了如何通过添加不同的类来创建不同大小和颜色的小球。在HTML结构中，我们创建了三个不同大小和颜色的小球，并通过style属性设置了它们在屏幕上的位置。这样，我们就实现了一个简单的语音输入动画。