CSS动画效果——仿微信语音播放小喇叭

最新推荐文章于 2025-11-07 16:02:33 发布

原创最新推荐文章于 2025-11-07 16:02:33 发布 · 2.1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #reactjs

该文章已生成可运行项目，

在本篇文章中，我们将通过 CSS 动画效果来实现一个类似微信语音播放时小喇叭的效果。通过一些创意和技巧，我们可以利用纯 CSS 动画来模拟这个效果，具体步骤如下：

1. 绘制三个半径不同的同心圆

我们首先需要创建三个不同半径的同心圆，这些圆环会组成一个类似“声波扩散”的效果。为了实现这个效果，我们使用了 CSS 的 border-radius 属性将元素设置为圆形，并通过设置不同的宽度和高度来定义每个圆的大小。

.circle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这里，我们将每个 .circle 元素定位在其父容器的中心，确保它们在同一个位置生成。

接下来，我们定义了三种不同的圆形样式，分别是 .circle1, .circle2, .circle3，它们代表不同大小的圆。

.circle1 {
  width: 12px;
  height: 12px;
  border-color: white;
}

.circle2 {
  width: 24px;
  height: 24px;
  border-color: white;
}

.circle3 {
  width: 36px;
  height: 36px;
  border-color: white;
}

2. 根据不同的时间间隔控制透明度的展示与否

为了使这些圆环动态显示和消失，我们将使用 CSS 动画来控制它们的透明度。我们通过设置 @keyframes 来定义一个名为 circleAnimate 的动画。该动画控制圆的透明度在每个时间段内的变化，以达到“逐渐出现和消失”的效果。

@keyframes circleAnimate {
  0%, 100% {
    opacity: 0;
  }
  33%, 66%, 99% {
    opacity: 1;
  }
}

接着，我们为每个圆添加了不同的动画延迟，使它们依次显示和消失，模拟出扩散的效果。

.animate1 {
  animation: circleAnimate 2s infinite 0.66s;
}

.animate2 {
  animation: circleAnimate 2s infinite 1.33s;
}

.animate3 {
  animation: circleAnimate 2s infinite 1.99s;
}

3. 使用 clip-path 属性来切割圆形为扇形

为了让每个圆的显示效果更像扇形，我们利用 clip-path 属性来切割圆形。通过设置多边形 polygon 的三个参数，指定裁剪圆形为扇形的效果。

.clip1 {
  clip-path: polygon(50% 50%, 100% 15%, 100% 85%);
}

.clip2 {
  clip-path: polygon(50% 50%, 0% 15%, 0% 85%);
}

这些 clip-path 属性分别控制不同的扇形方向，通过调整三个顶点的坐标，形成所需的扇形效果。

4. 设置不同的方向和绑定播放状态

考虑到不同用户的界面表现需求，我们设计了 isCurrentUser 变量来判断是否为当前用户。通过 CSS 类名的切换，可以确保不同用户的语音播放图标向不同方向扩散。
js代码:

return (
    <div
      className={`flex bg-sky-200 rounded-md py-2 px-4 text-xs items-center text-wrap dark:bg-green-500 cursor-pointer ${
        isCurrentUser ? "flex-row-reverse" : ""
      }`}
      onClick={onPlay}
    >
      <audio
        ref={audioRef}
        preload="auto"
        type="audio/mp3,audio/wav"
        src={"http://" + extra.url}
      />
      <div className="relative">
        <div className="circle circle-dot"></div>
        <div
          className={`circle circle1 ${isCurrentUser ? "clip2" : "clip1"} ${
            isAnimating ? "animate1" : ""
          }`}
        ></div>
        <div
          className={`circle circle2 ${isCurrentUser ? "clip2" : "clip1"} ${
            isAnimating ? "animate2" : ""
          }`}
        ></div>
        <div
          className={`circle circle3 ${isCurrentUser ? "clip2" : "clip1"} ${
            isAnimating ? "animate3" : ""
          }`}
        ></div>
      </div>
      <div className={`${isCurrentUser ? "mr-6" : "ml-6"}`}>{durationDesc}</div>
    </div>
  );

通过这个切换机制，不同用户的语音播放图标会根据用户身份进行反向绘制，从而达到不同的视觉效果

完整css代码：

  .circle {
    position: absolute;
    border-radius: 50%;
    border:2px solid #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .circle-dot {
    width: 2px;
    height: 2px;
    background-color: white;
  }
  
  /* 不同圆形的半径 */
  .circle1 {
    width: 12px;
    height: 12px;
    border-color: white;
  }

  .clip1 {
    clip-path: polygon(50% 50%, 100% 15%, 100% 85%); /* 切割角度微调 */
  }

  .clip2 {
    clip-path: polygon(50% 50%, 0% 15%, 0% 85%); /* 切割角度微调 */
  }

  .circle2 {
    width: 24px;
    height: 24px;
    border-color: white;
  }
  
  .circle3 {
    width: 36px;
    height: 36px;
    border-color: white;
  }

  .animate1 {
    animation: circleAnimate 2s infinite 0.66s;
  }
  .animate2 {
    animation: circleAnimate 2s infinite 1.33s;
  }
  .animate3 {
    animation: circleAnimate 2s infinite 1.99s; 
  }

@keyframes circleAnimate {
  0%, 100% {
    opacity: 0;
  }
  33%, 66%, 99% {
    opacity: 1;
  }
}