CSS扇形展開效果

知識點預備：

css3中特別重要的transform中的rotate()，現在transform可以將元素進行2d和3d變形。

2d transform常用的transform-function的功能:

translate()：用來移動元素，可以根據x軸和ｙ軸座標重新定位元素位置。在此基礎上有兩個擴充套件函式：translatex()和translatey()。

scale()：用來縮小或放大元素，可以使用元素尺寸發生變化。在此基礎上有兩個擴充套件函式：scalex()和scaley()。rotate()：用來旋轉元素。

skew()：用來讓元素傾斜。在此基礎上有兩個擴充套件函式：skewx()和skewy()。

matrix()：定義矩陣變形，基於x軸和y軸座標重新定位元素位置。

3d transform常用的transform-function的功能:

translate3d()：移元素元素，用來指定乙個3d變形移動位移量translate()：指定3ｄ位移在ｚ軸的位移量。

scale3d()：用來縮放乙個元素。scalez():指定z軸的縮放向量。

rotate3d()：指定元素具有乙個三維旋轉的角度。

rotatex()、rotatey()和rotatez()：讓元素具有乙個旋轉角度。

perspective()：指定乙個透視投影矩陣。

matrix3d()：定義矩陣變形。

這裡我們只需要2d中的rotate()屬性用來旋轉元素，

注意：旋轉的角度以順時針方向為正（按順勢正方向角度增大）

其他屬性的用法可以參考這裡w3cplus

transfrom-origin

指定變形的原點，預設是在元素的中心，可以接受一到三個引數，分別表示變形原點x軸、y軸、z軸的位置（可以實現許多有趣的旋轉）

transition

過渡transition是乙個復合屬性，包括transition-property、transition-duration、transition-timing-function、transition-delay這四個子屬性。通過這四個子屬性的配合來完成乙個完整的過渡效果

transition-property: 過渡屬性(預設值為all)

transition-duration: 過渡持續時間(預設值為0s)

transiton-timing-function: 過渡函式(預設值為ease函式)

transition-delay: 過渡延遲時間(預設值為0s)

想要詳細了解該屬性可以參考深入理解css過渡transition

css3 :nth-of-type(n) 選擇器

選擇器匹配屬於父元素的特定型別的第 n 個子元素的每個元素

好暈，還是來看個例子：

1 #box div:nth-of-type(2)

注意：如果在第乙個div裡巢狀了乙個div，那麼會選擇巢狀在第乙個div裡的那個div(-_-!)。

好了，準備工作做完了，開始實現扇形展開效果

第一步

基本樣式布局，直接看**

結構：

1     2         

3 
4 
5 
6 
7 
8 
9 
10 
11 
12 

1         *

5 body
8 #box
15 #box div
29 #box div:nth-of-type(1)
32 #box div:nth-of-type(2)
35 #box div:nth-of-type(3)
38 #box div:nth-of-type(4)
41 #box div:nth-of-type(5)
44 #box div:nth-of-type(6)
47 #box div:nth-of-type(7)
50 #box div:nth-of-type(8)
53 #box div:nth-of-type(9)
56 #box div:nth-of-type(10)
else
jilu = !jilu;
}

第四步

當點選每個div時（除了最後乙個div），被點選的div旋轉到270度，並且在他左右邊的div距離他的位置加大。

1         //為每個div新增點選事件

2 for(var i=0;ii)
10 if( this.index < i)
13 }
14 //被點選div的角度
15 divs[this.index].style.transform = "rotate("+(342-(this.index*15) + this.index*15-72)+"deg)";
16 
17 }
18 }

這個效果還是挺簡單的，角度的計算那裡有點繞，自己用瀏覽器看看每個div的角度，就會理解為什麼這麼寫了。

原始碼：

1 

2 367 68 69 
70 
71 
72 
73 
74 
75 
76 
77 
78 
79 
80144 
145 

純 Css 繪製扇形

在此分享如何純 css 打造圓環進度條。閱讀此文需具備基本數學知識 圓心角 弧度制 三角函式。為實現如下效果嘔心瀝血 當然你可以擁抱 svg.在此分享如何純 css 打造圓環進度條，只需三步！此物乃 2 1 夾心餅乾，藍綠色部分為果醬。顯而易見餅乾為兩個削成了圓形的div，我們重點演示果醬是怎麼製作...

純 Css 繪製扇形

為實現如下效果嘔心瀝血 當然你可以擁抱 svg.在此分享如何純 css 打造圓環進度條，只需三步！此物乃 2 1 夾心餅乾，藍綠色部分為果醬。顯而易見餅乾為兩個削成了圓形的div，我們重點演示果醬是怎麼製作的 如圖所示，大扇形由6個小扇形構成，每一小扇形佔整個圓餅的1 15，大扇形佔整個圓餅的6 1...

css畫扇形按鈕

最近專案中需要製作乙個扇形按鈕，效果是這樣的 屬性，完美實現。對作者表示感謝。clip，剪裁影象，來自w3school 我的偶像張鑫旭早在2011年就寫過關於 clip 的博文，好了，說到我要實現的這個扇形按鈕組，首先最外面肯定有乙個圓形 然後，再畫乙個圓形，設成絕對定位，並加上背景色 接著，進行裁...