css qq语音录音动画

在网页开发中，QQ语音录音动画是一个常见的效果，使用CSS可以非常简单地实现。下面我们来介绍一下如何使用CSS实现QQ语音录音动画。

  .recording {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #FF3B30;
    animation: pulse 1s infinite;
  }

  .recording:before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255, 59, 48, 0.2);
    animation: pulse-ring 1s infinite;
  }

  @keyframes pulse {
    0% {
      transform: scale(0.8);
      box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.4);
    }
    100% {
      transform: scale(1.2);
      box-shadow: 0 0 0 12px rgba(255, 59, 48, 0);
    }
  }

  @keyframes pulse-ring {
    0% {
      transform: scale(0.8);
      opacity: 1;
    }
    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }

上面的代码实现了一个QQ语音录音动画，使用了CSS的animation属性和keyframes关键字。首先定义了一个.recording类，用来表示录音动画，通过设置position、width、height、border-radius、background-color等属性来控制圆形样式；通过animation属性和pulse关键字来实现波纹效果。

接着通过.recording:before伪类来实现一个圆环效果，在圆形外面定义一个34px的圆环，并通过animation属性和pulse-ring关键字来实现圆环的扩散效果。

最后定义了两个关键帧pulse和pulse-ring，分别控制圆形和圆环的动画效果。通过transform、box-shadow和opacity等属性的变化，来实现动画效果。

通过这样的方式，我们可以非常简单地实现一个QQ语音录音动画，为网页增加一些趣味性和交互性。