展开圆的宽度

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示例。 悬停时，圆圈会扩展为药丸形状：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;