css - 展开圆的宽度

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

您只需将 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>