Javascript jQuery弹出/覆盖效果

我真的希望有人能帮我解决这个项目的要求，因为我对JS还是新手，更确切地说，我没有先进的与它，我只有今天破解这个，不知道如何

下面是一幅图像，它描述了效果需要如何，从上到下开始，你可以看到它是如何扩展的，但在顶部和底部是弯曲的，直到完全打开

任何人对我如何做到这一点有任何想法都是JS/jQuery（非基于插件的），如果有人能在这方面帮助我，我将永远是伟大的

---

多谢大家

不用Javascript/jQuery，只需使用CSS3

边界半径

就可以做到这一点。但是，如果您需要通过现有的JS代码启动该样式，那么只需将该样式包装在一个类中，并将该类应用于JS代码中的某个事件

记住，为了在你的问题中产生椭圆效果，块必须是矩形而不是正方形，否则你将以圆形结束

一个简单的示例片段：

div{
利润率：16px；
高度：10px；宽度：240px；
背景色：红色；
边界半径：50%；
不透明度：0；
过渡：所有2个容易进入；
}
a:焦点~div{
高度：120px；宽度：240px；
边界半径：0px；
不透明度：1；
}

您可以试试这个

演示

正文{
背景色：黑色；
保证金：0自动；
溢出：隐藏；
}
#覆盖层{
边框左上半径：1000px 100px；
边框右上半径：1000px 100px；
边框左下半径：1000px 100px；
边框右下半径：1000px 100px；
宽度：100%；
高度：100px；
背景色：白色；
保证金：0；
位置：绝对位置；
顶部：calc（50%-50px）；
-webkit动画：动漫4s无限；
动画：动漫4s无限；
高度：800px；
顶部：钙（50%-400px）；
}
@-webkit关键帧动画{
0% {
高度：1px；
顶部：计算值（50%-0.5px）；
}
100% {
高度：800px；
顶部：钙（50%-400px）；
}
}
@-moz为动画设置关键帧{
0% {
高度：1px；
顶部：计算值（50%-0.5px）；
}
100% {
高度：800px；
顶部：钙（50%-400px）；
}
}

---

你只需要做形状？是的，动画效果就是这样打开，直到完全打开，然后就会完全是方形的。因此，不是在单个章节上，而是在动画效果上，所以我单击一个链接，一个div显示为这样，并在流体序列中执行该效果-上面的图像只是一个粗略的图像example@adeneo：哇！很抱歉浪费了您的时间。我如何添加JS，以便在yoiu像您在您的上一样单击时应用该效果？只需将选择器

a:focus~div

更改为类，例如

div.myclass

。现在在你的代码中应用这个类。好的，谢谢，我已经添加到了一个演示html中，但似乎扩展到了右边，而不是从全幅开始，你知道为什么吗？再次感谢！我会做一个JS提琴，secI刚刚更新了答案，使用jQuery添加了一个代码段。谢谢！两件事；是否有可能在没有半径的情况下完成动画，以便慢角？关闭时，是否要反转动画？真的很感激你，伙计。谢谢哦，理想情况下，你只想点击一个链接就可以了。。