Question

朋友，我是CSS的新手。如您在这张图片中所见，我正在尝试执行脉冲效果。

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

我的问题是我不知道如何在实现此动画的地方实现完美的圆。这是我目前的结果：

我能做什么？

这是我的代码：

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%{
    width: 55px;
    height: 55px;
    box-shadow: 0 0 20px 3px #5a99d4;
  }
}

将鼠标悬停在动画上

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

脉冲-是我创建的动画的名称

1s -是动画的长度   由内而外-是缓动功能-https://css-tricks.com/ease-out-in-ease-in-out

无限-告诉浏览器无限重复播放动画

替代-告诉浏览器，在每个动画的结尾，它应该从结尾开始，然后再回到开头   动画看起来很流畅。

您可以拍摄我的动画并对其进行处理，直到您接近所需的内容为止，但是如果您确实设置了该确切的动画，则可以在项目中添加材质设计，并且可以立即创建这样的按钮< / p>

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%

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

使用CSS创建完美的圆圈

3 个答案: