JS/CSS：如何将圆形动画制作为药丸形状？

Question

好吧，这就是我想要实现的目标（最好使用 JS/jQuery）： https: //dribbble.com/shots/3445331-Expanding-Button

悬停时，我需要一个圆形 div 展开为药丸形状，以便其他按钮可以弹出其中。当我再次单击“x”时，我需要它回滚到圆形。

我只知道如何使用 JS/jQuery 来扩展事物。我怎样才能做到这一点？我只是用插件搜索找不到任何东西。

Answer 1

@mari Lai 说得对。如果您将包含的 div 视为具有不断变化的宽度和一致的边框半径的单个矩形，那么它确实非常简单。（您可以使用 jQuery/JS 或简单的悬停/焦点 css 触发此操作）

像这样的东西...

.pill { 
  width: 50px; 
  height: 50px; 
  border-radius: 25px;
  background-color: #898989;
  transition: width .5s ease;
}
.pill:hover, .pill:focus { 
  width: 240px;
}

<div class="pill">
</div>