用 CSS 创建一个完美的圆

Question

朋友们怎么样，我是 CSS 的新手。正如您在这张图片中看到的那样，我正在尝试执行脉冲效果。

我希望我的菜单图标（“主页”旁边的图标）具有类似的动画。

我的问题是我不知道如何实现一个完美的圆在哪里实现这个动画。这是我目前的结果：

我可以做什么？

这是我的代码：

https://multi-level-side-menu-4bj1tj.stackblitz.io

 ion-header button[ion-button].bar-buttons {
  border-radius: 10px;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
  animation: pulse 1.5s infinite;
}
ion-header button[ion-button].bar-buttons:hover {
  animation: none;
}

@keyframes pulse {
  0% {
  transform: scale(0.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 1 0 10px rgba(90, 153, 212, 0);
  }
    100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
  }
}

我分享我正在做的源代码，如果你想编辑一些东西，你必须修改 app/app.css 文件，才能实时看到。

谢谢你！

原文由 yavg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为了获得完美的圆形，您首先需要拥有完美的正方形。因此，例如，您的按钮需要具有类似 width: 32px; height: 32px 的尺寸。要将正方形变成圆形，您必须应用 50% 的边框半径，例如 border-radius: 50% 。

原文由 FranCarstens 发布，翻译遵循 CC BY-SA 4.0 许可协议