Javascript 用CSS制作一个碗/微笑/带有圆形边框和渐变的半圆

我正在做一些CSS动画，我正在尝试创建碗状/半圆，有一个圆形的边框，类似这样的东西

到目前为止，我已经创建了一个半圆和波浪，我唯一缺少的是带有渐变的圆形边界，所以请指导我如何实现这一点，因为我是动画新手 这是我迄今为止所做的工作的代码，也可以指导我认识我的错误，这样我就可以从错误中吸取教训，我还分享了我创建的文件的链接

//做一些波浪。
var ocean=document.getElementById（“海洋”），
波宽=11，
waveCount=数学地板（窗内宽度/waveWidth），
docFrag=document.createDocumentFragment（）；
对于（var i=0；i
半圆{
利润率最高：10%；
左缘：40%；
宽度：50px；
高度：65px；
边框左下半径：460px；
边框右下半径：460px；
边界：40px固体；
左边框：40px实心#fce058；
右边框：40px固体#cc9e3a；
边框底部：40px实心#e4bf49；
边界顶部：0；
边框左上半径：10px；
边框右上角半径：10px；
溢出：隐藏；
位置：绝对位置；
}
身体{
高度：自动；
保证金：0；
}
#海洋{
位置：绝对位置；
边缘顶部：10px；
宽度：200%；
最小高度：100%；
背景图像：-webkit渐变(
线性的
左下角，
左上角，
颜色停止（0，rgb（40,40,40）），
彩色光圈（0.50，rgb（45,45,45））
);
}
.挥手{
背景：#fff；
显示：内联块；
身高：110%；
宽度：80px；
z指数：0；
位置：绝对位置；
-webkit动画名称：dostuff；
-webkit动画持续时间：4s；
-webkit动画迭代计数：无限；
-webkit转换计时功能：轻松输入输出；
}
@-webkit关键帧dostuff{
0%{
身高：20%；
}
50%{ 
身高：10%；
}
100%{ 
身高：20%；
}
}
html，
身体，
#气泡{高度：100%}
正文{溢出：隐藏}
#气泡{填充：0px 0}
.泡泡{
宽度：90px；
高度：90px；
背景:#f3；
边界半径：200px；
-moz边界半径：200px；
-webkit边界半径：200px；
位置：绝对位置；
z指数：99；
}
.x1{
-webkit变换：比例（0.1）；
-moz变换：比例（0.1）；
变换：比例（0.1）；
不透明度：0.2；
背景:#f3；
-webkit动画：移动云彩25秒线性无限，横向4秒轻松进出无限交替；
-moz动画：moveclouds 25s线性无限，横向4s缓进无限交替；
-o型动画：移动云彩25秒线性无限，横向4秒轻松进出无限交替；
}
.x2{
左：410像素；
-webkit变换：比例（0.1）；
-moz变换：比例（0.1）；
变换：比例（0.1）；
不透明度：0.5；
-webkit动画：moveclouds 25秒线性无限，侧向5秒缓进缓出无限交替；
-moz动画：moveclouds 25秒线性无限，侧向5秒缓进缓出无限交替；
-o型动画：移动云彩25秒线性无限，横向5秒缓进出无限交替；
}
.x3{
左：500px；
-webkit变换：比例（0.1）；
-moz变换：比例（0.1）；
变换：比例（0.1）；
不透明度：0.3；
-webkit动画：移动云彩20秒线性无限，横向4秒轻松进出无限交替；
-moz动画：moveclouds 20s线性无限，横向4s缓进无限交替；
-o型动画：移动云20s线性无限，横向4s缓进无限交替；
}
.x4{
左：310px；
-webkit变换：比例（0.1）；
-moz变换：比例（0.1）；
变换：比例（0.1）；
不透明度：0.35；
-webkit动画：移动云28线性无限，横向2缓进无限交替；
-moz动画：moveclouds 28 s线性无限，横向2 s缓进输出无限交替；
-o型动画：移动云28 s线性无限，横向2 s缓进输出无限交替；
}
.x5{
左：190px；
-webkit变换：比例（0.1）；
-moz变换：比例（0.1）；
变换：比例（0.1）；
不透明度：0.3；
-webkit动画：移动云27的线性无限，横向1的缓进输出无限交替；
-moz动画：移动云27 s线性无限，横向1 s缓进输出无限交替；
-o型动画：移动云27的线性无限，横向1的缓进输出无限交替；
}
.x6{
左：450px；
-webkit变换：比例（0.1）；
-moz变换：比例（0.1）；
变换：比例（0.1）；
不透明度：0.3；
-webkit动画：移动云17线性无限，横向1秒缓进无限交替；
-moz动画：moveclouds 17秒线性无限，横向1秒缓进输出无限交替；
-o型动画：移动云彩17秒线性无限，横向1秒放松输入输出无限交替；
}
.x7{
左：600px；
-webkit变换：比例（0.1）；
-moz变换：比例（0.1）；
变换：比例（0.1）；
不透明度：0.3；
-webkit动画：moveclouds 23秒线性无限，横向1秒缓进输出无限交替；
-moz动画：moveclouds 23秒线性无限，横向1秒缓进输出无限交替；
-o型动画：移动云23s线性无限，横向1s缓进输出无限交替；
}
.x8{
左：467px；
-webkit变换：比例（0.1）；
-moz变换：比例（0.1）；
变换：比例（0.1）；
不透明度：0.3；
-webkit动画：移动云24秒线性无限，横向1秒缓进无限交替；
-moz动画：移动云24秒线性无限，横向1秒缓进输出无限交替；
-o型动画：移动云24秒线性无限，横向1秒缓进出无限交替；
}
.x9{
左：350px；
-webkit变换：比例（0.1）；
-moz变换：比例（0.1）；
变换：比例（0.1）；
op