用CSS创建一个完美的圆

朋友们呢，我对CSS这个话题还不熟悉。我正在尝试执行脉冲效果，正如你们在这张图片中看到的

我想我的菜单图标（图标旁边的字“家”）有一个类似的动画

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

我能做什么

这是我的代码：

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

---

谢谢大家!

要获得完美的圆形，首先需要有完美的正方形。因此，例如，您的按钮需要具有如下尺寸：

width:32px；高度：32px

。要将正方形变成圆形，您必须应用50%的边界半径，例如，

边界半径：50%

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

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

你参考的动画是谷歌材料设计的一部分，这是一个非常复杂的CSS动画。可以从头开始重新创建，但这需要时间

你需要的核心是一个不断扩大的圆圈和一个可以脉冲输出的方块阴影

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

通过使用

@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;
}

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

1s-是动画的长度 缓进缓出-是缓进功能-

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

alternate-告诉浏览器，在每个动画结束时，它应该从结尾开始，然后以这种方式返回到开始 动画看起来很平滑

你可以制作我的动画，直到你得到一个更接近你想要的东西，但是如果你真的对那个精确的动画感兴趣，那么你可以在你的项目中添加材质设计，你可以在任何时候创建这样的按钮

---

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

高度：40px；宽度：40px；边界半径：50%

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

我对css的世界不太了解，但我相信你在寻找的是材料设计的“涟漪”效应，看看吧。我把它作为评论发布，因为我相信我会因为仅仅发布一个链接而被否决。希望有帮助！另外，在这里发布你的代码（真实代码，没有screeshot），因为这也会让你获得很多向下的投票。给出一个与宽度相同的高度，然后给出
边界半径：50%
，瞧，问题会解决的。@code\u忍者谢谢..但这对我不适用…你也能分享你的html吗，谢谢，我试着按照你说的做了，我不知道我是错过了什么还是做错了什么。。这是因为按钮的内容大于32px，它将按钮的尺寸推过32px x 32px，打破了纵横比。例如，在48px 48px上，它看起来是对的，但它可能太大了，你不喜欢。或者，您可以将汉堡包图标更改为尺寸更小的图标，使其变小，或者在按钮上尝试使用
溢出：隐藏
。我不知道如何修复它，但如果您在此处更新您的样式，我会继续尝试：离子标题按钮[离子按钮]。条形按钮{宽度：48px；高度：48px；边框半径：50%；背景：#5a99d4；方框阴影：0RGBA（90153212，0.5）；动画：脉冲1.5s无限；}对我不起作用：（你试过了吗？效果很好！我只是在你的代码上检查过了！
div:hover{
    animation: pulse 1s ease-in-out infinite alternate;
}

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