css – 展开圆的宽度

我对 CSS3动画很陌生,我想知道你如何做以下的动画：
我有一个圈子：

在悬停时,我想扩展圆圈的宽度,使其变成药丸形状,并带有如下图所示的过渡：

这就是我试过的.问题是当宽度扩展时,圆会过渡到椭圆：

.logo {
  background: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transition: width 2s;
}

.logo:hover {
  width: 300px;
}

<div class="logo"></div>

解决方法

您只需将border-radius值更改为百分比以外的任何其他单位(列出的所有单位为 here).有关其工作原理以及为什么需要将这些单位用于所需输出的说明,请参阅 Border-radius in percentage (%) vs pixels (px).

使用px的示例.圆圈在悬停时扩展为药丸形状：

.logo {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: red;
  transition: width 2s;
}
.logo:hover {
  width: 300px;
}

<div class="logo"></div>

如果您不知道圆的高度,可以设置一个非常高的值,以便圆形在宽度扩展时保持其药丸形状：

.logo {
  width: 200px;
  height: 200px;
  border-radius: 999px;
  background: red;
  transition: width 2s;
}
.logo:hover {
  width: 400px;
}

<div class="logo"></div>