jquery - 挤压带有 border-radius 省略号的按钮

Question

我正在为我 4 岁的 child 制作一个按钮。 2 个 div、css border-radius: 和 jquery .animate。我使用百分比 border-radius 来获得漂亮的椭圆形。

到目前为止一切正常，除了当按钮“按下”时我需要缩短按钮的下方部分。这是为了隐藏 div 的 Angular 。但是，当我缩短 div 时，省略号的曲线会“挤压”。这很微妙，我认为我的 child 不会注意到，但我注意到了。

我的问题有两个:我该如何解决这个挤压问题？为什么这会产生我正在寻找的非椭圆:

border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;

笔:http://codepen.io/claytron5000/pen/PqqNya

Answer 1

它会产生问题，因为基于百分比的高度是基于宽度和高度的，所以当您更改高度时，百分比半径也会发生变化。这就是您首先获得椭圆的方法。我已经解决了这里的问题，方法是在两者之间操纵第三个 div，并在上方和下方设置一个椭圆，然后对中间 div 的 margin-top 和 height 进行动画处理只有(并单独留下顶部的椭圆动画)。

这是解决方案的代码笔:http://codepen.io/anon/pen/aOONXm

要回答您的第二个问题，100px 的值不会按照您希望的方式工作，因为 (border-bottom-right-radius: 100px;) 是设置两者的简写高度和宽度值(border-bottom-right-radius: 100px 100px;)。如果你想使用像素值，使用

border-bottom-right-radius: 150px 100px;
border-bottom-left-radius: 150px 100px;

在这种情况下相当于

 border-bottom-right-radius: 50%;
 border-bottom-left-radius: 50%;

因为你的宽是300px，高是200px