Javascript 如何创建Apple Watch菜单样式的WEB

我想创建一个网站看起来像苹果手表菜单。有人能帮我吗？

---

您可以在网站上尝试这种菜单样式

正文{
背景#8bc34a；
颜色：白色；
文本对齐：居中；
}
a{
颜色：继承；
}
h1，h2，h3，h4{
保证金：0；
边缘底部：10px；
边缘顶部：10px；
}
h1{
字号：3em；
}
.菜单{
-webkit筛选器：url（“#goo”）；
过滤器：url（“#goo”）；
}
.菜单项，.菜单打开按钮{
背景：#e91e63；
边界半径：100%；
宽度：80px；
高度：80px；
左边距：-40px；
位置：绝对位置；
顶部：150px；
颜色：白色；
文本对齐：居中；
线高：80px；
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
-webkit转换：-webkit转换慢出200ms；
过渡：-webkit转换缓解200ms；
过渡：变换缓变200ms；
转换：转换缓变200ms，-webkit转换缓变200ms；
}
.菜单打开{
显示：无；
}
.汉堡包{
宽度：25px；
高度：3倍；
背景：白色；
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
左边距：-12.5px；
利润上限：-1.5px；
-webkit转换：-webkit转换200ms；
转换：-webkit转换200ms；
转换：转换200ms；
转换：转换200ms，-webkit转换200ms；
}
.汉堡包-1{
-webkit转换：translate3d（0，-8px，0）；
变换：translate3d（0，-8px，0）；
}
.汉堡包-2{
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.汉堡包-3{
-webkit转换：translate3d（0,8px,0）；
转换：translate3d（0,8px,0）；
}
.菜单打开：选中+.菜单打开按钮.汉堡-1{
-webkit变换：平移3D（0,0,0）旋转（45度）；
变换：平移3D（0,0,0）旋转（45度）；
}
.菜单打开：选中+.菜单打开按钮.汉堡-2{
-webkit变换：平移3D（0,0,0）比例（0.1,1）；
变换：平移3D（0,0,0）比例（0.1,1）；
}
.菜单打开：选中+.菜单打开按钮.汉堡-3{
-webkit变换：平移3D（0,0,0）旋转（-45度）；
变换：平移3D（0,0,0）旋转（-45度）；
}
.菜单{
位置：绝对位置；
左：50%；
左边距：-190px；
填充顶部：190px；
左侧填充：190px；
宽度：380px；
高度：380px；
框大小：边框框；
字体大小：20px；
文本对齐：左对齐；
}
.菜单项：悬停{
背景：白色；
颜色：#e91e63；
}
.菜单项：第n个子项（3）{
-webkit转换持续时间：180ms；
过渡时间：180ms；
}
.菜单项：第n个子项（4）{
-webkit转换持续时间：180ms；
过渡时间：180ms；
}
.菜单项：第n个子项（5）{
-webkit转换持续时间：180ms；
过渡时间：180ms；
}
.菜单项：第n个子项（6）{
-webkit转换持续时间：180ms；
过渡时间：180ms；
}
.菜单项：第n个子项（7）{
-webkit转换持续时间：180ms；
过渡时间：180ms；
}
.菜单项：第n个子项（8）{
-webkit转换持续时间：180ms；
过渡时间：180ms；
}
.菜单项：第n个子项（9）{
-webkit转换持续时间：180ms；
过渡时间：180ms；
}
.菜单打开按钮{
z指数：2；
-webkit过渡计时功能：立方贝塞尔（0.175、0.885、0.32、1.275）；
过渡计时功能：立方贝塞尔（0.175,0.885,0.32,1.275）；
-webkit转换持续时间：400ms；
过渡时间：400ms；
-webkit转换：缩放（1.1,1.1）平移3D（0,0,0）；
变换：缩放（1.1,1.1）平移3D（0,0,0）；
光标：指针；
}
.菜单打开按钮：悬停{
-webkit转换：缩放（1.2,1.2）平移3D（0,0,0）；
变换：缩放（1.2,1.2）平移3D（0,0,0）；
}
.菜单打开：选中+.菜单打开按钮{
-webkit转换定时功能：线性；
过渡时间函数：线性；
-webkit转换持续时间：200ms；
过渡时间：200ms；
-webkit变换：缩放（0.8,0.8）平移3D（0,0,0）；
变换：缩放（0.8,0.8）平移3D（0,0,0）；
}
.菜单打开：选中~.菜单项{
-webkit过渡计时功能：立方贝塞尔（0.935,0,0.34,1.33）；
过渡计时功能：立方贝塞尔（0.935,0,0.34,1.33）；
}
.菜单打开：选中~菜单项：第n个子项（3）{
-webkit转换持续时间：180ms；
过渡时间：180ms；
-webkit转换：translate3d（0.08361px，-104.99997px，0）；
转换：translate3d（0.08361px，-104.99997px，0）；
}
.菜单打开：选中~菜单项：第n个子项（4）{
-webkit转换持续时间：280ms；
过渡时间：280ms；
-webkit转换：translate3d（90.9466px，-52.47586px，0）；
转换：translate3d（90.9466px，-52.47586px，0）；
}
.菜单打开：选中~菜单项：第n个子项（5）{
-webkit转换持续时间：380ms；
过渡时间：380ms；
-webkit转换：translate3d（90.9466px，52.47586px，0）；
转换：translate3d（90.9466px，52.47586px，0）；
}
.菜单打开：选中~菜单项：第n个子项（6）{
-webkit转换持续时间：480ms；
过渡时间：480ms；
-webkit转换：translate3d（0.08361px，104.99997px，0）；
转换：translate3d（0.08361px，104.99997px，0）；
}
.菜单打开：选中~菜单项：第n个子项（7）{
-webkit转换持续时间：580ms；
过渡时间：580ms；
-webkit转换：translate3d（-90.86291px，52.62064px，0）；
转换：translate3d（-90.86291px，52.62064px，0）；
}
.菜单打开：选中~菜单项：第n个子项（8）{
-webkit转换持续时间：680ms；
过渡时间：680ms；
-webkit转换：translate3d（-91.03006px，-52.33095px，0）；
转换：translate3d（-91.03006px，-52.33095px，0）；
}
.菜单打开：选中~菜单项：第n个子项（9）{
-webkit转换持续时间：780ms；
过渡时间：780ms；
-webkit转换：translate3d（-0.25084px，-104.9997px，0）；
转换：translate3d（-0.25084px，-104.9997px，0）；
}<