天給大家帶來的是兩款使用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: