用 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文件，才能实时看到。

谢谢！

Answer 1

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

Answer 2

要创建一个完美的圆形，您需要相等的宽度和高度以及 50% 的边框半径

width: 50px;
height: 50px;
border-radius: 50%;

您引用的动画是 Google 材料设计的一部分，这是一个非常复杂的 CSS 动画。可以从头开始重新创建它，但这需要时间。

您所需要的核心是不断扩大的圆圈和发出脉冲的盒子阴影。

我在这里创建了一个简化版本

https://codepen.io/suth_a/pen/NBVNXE?editors=1100

您通过使用@keyframes name 定义动画来创建动画

@keyframes pulse{
  100%{
    box-shadow: 0 0 20px 3px #5a99d4;
    transform: scale(1.2);
  }
}

悬停动画开始

div:hover{
    animation: pulse 1s ease-in-out infinite alternate;
}

pulse - 是我创建的动画的名称

1s - 是动画的长度 ease-in-out - 是缓动函数 - https://css-tricks.com/ease-out-in-ease-in-out

infinite - 告诉浏览器无限期地重复动画

alternate - 告诉浏览器在每个动画结束时它应该从结尾开始并返回到开头，这样 动画看起来很流畅。

您可以使用我的动画并对其进行处理，直到您获得更接近您想要的东西，但是如果您真的对那个确切的动画进行了设置，那么将材料设计添加到您的项目中，您可以立即创建这样的按钮

https://materializecss.com/getting-started.html

<a class="btn-floating pulse"><i class="material-icons">menu</i></a>

https://materializecss.com/pulse.html

Answer 3

将以下 css 属性添加到脉冲图标（圆圈）。

height:40px; width:40px; border-radius:50%

如果高度和宽度不适合您的需要，那么您可以按比例增加它们，使它们始终彼此相等。