展开圆的宽度

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). For an explanation of how this works and why you need to use these units for the desired output, see 。

像素示例。 悬停时圆圈会扩展成药丸形状 :

.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>

展开圆的宽度

Expand width of circle

css

css-transitions

css-animations

css-shapes