展开圆的宽度

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值更改为百分比以外的任何其他单位(此处列出的所有单位).有关其工作原理以及为什么需要将这些单位用于所需输出的说明,请参阅边界半径百分比(%)与像素(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>