css麦克风音波动画

以下是通过CSS实现麦克风音波动画的代码示例：

<div class="microphone">
  <div class="scale">
    <em></em>
    <em></em>
    <em></em>
    <!-- 共15个em元素 -->
  </div>
</div>

.microphone {
  width: 50px;
  height: 50px;
  background-color: #000;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scale {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scale em {
  width: 5px;
  height: 10%;
  background-color: #fff;
  margin: 0 2px;
  animation: load 1s infinite;
}

@keyframes load {
  0% {
    height: 10%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 10%;
  }
}

这段代码实现了一个简单的麦克风音波动画效果。通过CSS的样式定义和动画关键帧的设置，一组垂直排列的短竖条在高度上呈现周期性的变化，形成了类似声音震动的效果。