htmlcssCSS圓形展開菜單#編程

SS圓形展開菜單。

·1.設置開關狀態為checked時子菜單的展開收縮動畫。

·2.設置開關狀態為checked時子菜單的展開收縮動畫。

·3.設置開關狀態為checked時子菜單的展開收縮動畫。

·4.重置開關細節樣式。

·5.添加子菜單的詳細樣式。

·6.設置開關狀態為checked時子菜單的展開收縮動畫。

·7.設置開關狀態為checked時子菜單的展開收縮動畫。

天給大家帶來的是兩款使用css3來創建的漂亮的圓形菜單。在這里主要分析一些基本的數學計算公式，數學不夠好？沒關系，這些公式都非常簡單，只要明白了做出來很容易。

數學計算公式：

最好的理解這些公式的方式是使用畫圖的方式來，先來看看每個扇形的角度是多少，下面是一張示意圖：

所以扇形的分布如上圖所示，我們的demo中有6個li，那么每個li的角度為：

180deg / 6 = 30deg

如果你想做一個完整的圓形，那么角度值為：

360deg / 6 = 60deg

以此類推，你可以計算出你想要的扇形角度。我們將在css中使用這些角度。

要創建一個剛好等于我們所需要的角度的扇形，可以使用skew（）來將它們傾斜。傾斜的值為：

90deg – x deg

這里的x為我們需要的角度。

這時候，列表中的所有li
都將因傾斜而產生扭曲，因此我們需要所有的a元素設置為不傾斜，

效果圖如下：

效果一

效果二

源碼部分：

效果一的HTML結構：

效果一的CSS樣式：

效果二的HTML結構：

效果二的CSS樣式：

給大家的兩點建議：

由于源碼太多，影響展示效果，所以需要完整源碼和獲取更多內容的朋友敬請關注！

上圖所示，這是一個CSS3和SVG實現的圓形菜單。在圓環上一共有7個節點，表示菜單項，當鼠標滑過或者點擊其中一個節點時，就會彈出文字菜單項，圓環形狀和節點都是采用SVG繪制而成，動畫效果也非常不錯。

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。