天给大家带来的是两款使用css3来创建的漂亮的圆形菜单。在这里主要分析一些基本的数学计算公式，数学不够好？没关系，这些公式都非常简单，只要明白了做出来很容易。

数学计算公式：

最好的理解这些公式的方式是使用画图的方式来，先来看看每个扇形的角度是多少，下面是一张示意图：

所以扇形的分布如上图所示，我们的demo中有6个li，那么每个li的角度为：

180deg / 6=30deg

如果你想做一个完整的圆形，那么角度值为：

360deg / 6=60deg

以此类推，你可以计算出你想要的扇形角度。我们将在css中使用这些角度。

要创建一个刚好等于我们所需要的角度的扇形，可以使用skew（）来将它们倾斜。倾斜的值为：

90deg – x deg

这里的x为我们需要的角度。

这时候，列表中的所有li
都将因倾斜而产生扭曲，因此我们需要所有的a元素设置为不倾斜，

效果图如下：

效果一

效果二

源码部分：

效果一的HTML结构：

效果一的CSS样式：

效果二的HTML结构：

效果二的CSS样式：

给大家的两点建议：

1. 初学者千万不要着急看复杂的案例特效源码，除了打击大家的自信心，没有其他好处了。

2. 遇到问题的时候，一定要追本溯源，及时解决眼前的问题，不然这个问题会一直缠绕着你，影响后面的学习效果。

由于源码太多，影响展示效果，所以需要完整源码和获取更多内容的朋友敬请关注！

用CSS样式实现加载中的进度条等待加载效果，跟随着圆环边框也缓慢运动起来，实现效果如下：

文字会过渡加载、圆环边框也会从少到多过渡。

下面看看实现代码

html:

css: