如何实现类似汽车喇叭的扩散圆环动画？现有CSS方案未达标

以下是符合需求的实现代码，解决了原代码中边框放大、动画节奏不符的问题：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>汽车喇叭扩散效果</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
  }

  .container {
    position: relative;
    width: 20px;
    height: 20px;
  }

  .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    border: 2px solid #4FA6B5;
    animation: expand 2s linear infinite;
    transform: translate(-50%, -50%);
  }

  @keyframes expand {
    0% {
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      width: 200px;
      height: 200px;
      opacity: 0;
    }
  }
</style>
</head>
<body>
<div class="container" id="container"></div>

<script>
  const container = document.getElementById("container");
  const totalDuration = 2;
  const numberOfCircles = 4;

  for (let i = 0; i < numberOfCircles; i++) {
    const circle = document.createElement("div");
    circle.classList.add("circle");
    circle.style.animationDelay = `${-(totalDuration / numberOfCircles) * i}s`;
    container.appendChild(circle);
  }
</script>
</body>
</html>

关键修改说明 #

• 固定边框宽度：放弃transform: scale()，改用直接修改width/height配合translate(-50%, -50%)，确保圆环从中心扩散时边框粗细不变
• 匀速动画节奏：将时间函数改为linear，模拟真实声波匀速扩散的效果
• 均匀间隔触发：调整动画延迟计算逻辑，让多个圆环的扩散间隔更连贯自然
• 贴近真实效果：缩小初始容器尺寸，让圆环从极小的中心开始扩散，更贴合汽车喇叭的视觉表现

内容的提问来源于stack exchange，提问作者user19928674