Question

好的，这就是我想要实现的（理想情况下使用JS / jQuery）： https://dribbble.com/shots/3445331-Expanding-Button

悬停时，我需要一个圆形div扩展成药丸形状，以便其他按钮可以插入其中。当我点击＆＃34; x＆＃34;再次，我需要它回滚到圆形。

我只知道如何使用JS / jQuery扩展内容。我怎样才能做到这一点？我无法通过插件搜索任何内容。

Answer 1

不要认为它是一个圆形的药丸形状，也许尝试使它成为一个方形div，在悬停时将宽度更改为更多的矩形。

然后你只需要将border-radius圆形看起来像圆形/丸形。希望有道理。

Answer 2

@mari Lai是对的。如果您将包含div视为具有不断变化的宽度和一致的边界半径的单个矩形，那么它非常直接。（你可以用jQuery / JS触发它或简单地悬停/聚焦css）

像这样......

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

所以开头的“circle”是一个带有circle类的div，比如下面的CSS：

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

然后您可以将其更改为以下内容：

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

所以现在圆圈可以设置宽度变化的动画。我们可以用类来定义“药丸”宽度：

.pill {
    width: 300px;
}

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

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

当然为了容纳“circle”div中的更多按钮，你可以使用另一个选择器进行点击操作，但是你明白了这一点：）

：编辑：这是一个小提琴：https://jsfiddle.net/6g0z3390/

：EDIT2：我刚刚意识到你不想在点击上进行更改但是在悬停时。在这种情况下，你可以简单地删除JS并将css从.pill更改为.circle:hover：）

JS / CSS：如何将圆圈设置为药丸形状？

3 个答案: