JS/CSS: 如何将圆形动画化为药丸形状？

Question

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

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

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

Answer 1

不要认为它是圆形到药丸形状，也许可以尝试将其变成正方形 div，这会在悬停时将宽度更改为更多的矩形。

然后你只需要将 border-radius 做成圆角看起来像 circle/pill 形状。希望这是有道理的。

Answer 2

所以 "circle" 开头是 div 和 class circle, 用下面的 CSS:

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

那么您可以将其更改为以下内容：

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    transition: width ease 0.3s;
}

所以现在圆可以动画宽度变化。我们可以用 class:

再次定义 "pill" 宽度

.pill {
    width: 300px;
}

如果您想使用 jQuery 在点击时触发宽度变化，我们可以执行以下操作：在圆圈上切换药丸 class div

$(".circle").on("click", function() {
    $(".circle").toggleClass("pill");
});

当然要在 "circle" div 中容纳更多按钮，您可以使用另一个选择器来执行单击操作，但您明白了:)

：编辑：这是一个 fiddle：https://jsfiddle.net/6g0z3390/

：编辑2：我刚刚意识到您不希望在单击时更改，而是在悬停时更改。在那种情况下，您可以简单地删除 JS 并将 css 从 .pill 更改为 .circle:hover :)

Answer 3

@mari Lai 说得对。如果您将包含 div 的内容视为具有不断变化的宽度和一致的边框半径的单个矩形，那么它真的非常简单。（您可以使用 jQuery/JS 或简单地 hover/focus 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>

JS/CSS: 如何将圆形动画化为药丸形状？

JS/CSS: how to animate a circle to pill shape?

html

javascript

css

jquery

jquery-animate