扩大圆的宽度

Question

我对 CSS3 动画还很陌生，我想知道您如何执行以下操作： 我有一个圆圈：

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

这是我尝试过的。问题是随着宽度的扩大，圆会变成椭圆：

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

.logo:hover {
  width: 300px;
}

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

Answer 1

您只需将边框半径值更改为百分比以外的任何其他单位（列出的所有单位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>