学习了妙味课堂扇形展开效果
知识点预备：
【1】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
【2】transfrom-origin
指定变形的原点，默认是在元素的中心，可以接受一到三个参数，分别表示变形原点X轴、Y轴、Z轴的位置（可以实现许多有趣的旋转）
【3】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
【4】CSS3 :nth-of-type(n) 选择器
选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
好晕，还是来看个例子：
1 #box div:nth-of-type(2)
这句代码的意思是选择在#box下的第2个div
注意：如果在第一个div里嵌套了一个div，那么会选择嵌套在第一个div里的那个div(-_-!)。
好了，准备工作做完了，开始实现扇形展开效果
第一步
基本样式布局，直接看代码
结构：
1 <div id="box"> 2 <div></div> 3 <div></div> 4 <div></div> 5 <div></div> 6 <div></div> 7 <div></div> 8 <div></div> 9 <div></div> 10 <div></div> 11 <div></div> 12 </div>
样式：
1 *{
2 margin: 0;
3 padding: 0;
4 }
5 body{
6 background: #666;
7 }
8 #box{
9 width: 1200px;
10 height: 700px;
11 background: url(img/bg.png) no-repeat;
12 position: relative;
13 margin: 100px auto;
14 }
15 #box div{
16 width: 400px;
17 height: 100px;
18 border-radius: 9px;
19 position: absolute;
20 left: 555px;
21 top: 444px;
22 /*
23
24 */
25 background: url(img/logo.png) no-repeat 280px 56px;
26 transform-origin: 35px 50px;
27 transition: 1s;
28 }
29 #box div:nth-of-type(1){
30 background-color: #417191;
31 }
32 #box div:nth-of-type(2){
33 background-color: #ce8298;
34 }
35 #box div:nth-of-type(3){
36 background-color: #f78992;
37 }
38 #box div:nth-of-type(4){
39 background-color: #fbc0a5;
40 }
41 #box div:nth-of-type(5){
42 background-color: #f8988f;
43 }
44 #box div:nth-of-type(6){
45 background-color: #f16273;
46 }
47 #box div:nth-of-type(7){
48 background-color: #9c9fcd;
49 }
50 #box div:nth-of-type(8){
51 background-color: #bae2d3;
52 }
53 #box div:nth-of-type(9){
54 background-color: #43bab8;
55 }
56 #box div:nth-of-type(10){
57 background-color: #678d95;
第二步
写扇形的展开函数go()和闭合函数back()
go()函数
1 //使扇形打开
2 function go(){
3 for(var i = 0;i<divs.length;i++){
4 //"rotate("+345-(i*15)+"deg)"
5 //不行，因为这样会先算"rotate("+345
6 divs[i].style.transform = "rotate("+(342-(i*15))+"deg)";
7 }
8 }
我们要让每个div都按一定的角度分开不至于重叠，用(i*15)可以实现这个小目标。342是定义第一个div的位置。
back()函数
1 //是扇形合并
2 function back(){
3 for(var i=0;i<divs.length;i++){
4 divs[i].style.transform = "rotate(0deg)";
5 }
6 }
7 }
第三步
当点击最后一个div时，扇形收起或者打开
divs[9].onclick = function(){
if(jilu){
back();
}
else{
go();
}
jilu = !jilu;
}
jilu这个变量的初始值是true,用jilu这个变量是为了当点击最后一个div时，通过判断jilu的值，扇形可以收起或者打开
第四步
当点击每个div时（除了最后一个div），被点击的div旋转到270度，并且在他左右边的div距离他的位置加大。
1 //为每个div添加点击事件
2 for(var i=0;i<divs.length - 1;i++){
3 divs[i].index = i;
4 divs[i].onclick = function(){
5 for(var i = 0;i < divs.length;i++){
6 //当第i个div被点击，其他div的角度
7 if(this.index > i){
8 divs[i].style.transform = "rotate("+(342-(i*15) + this.index*15-72+10)+"deg)";
9 }
10 if( this.index < i){
11 divs[i].style.transform = "rotate("+(342-(i*15) + this.index*15-72-10)+"deg)";
12 }
13 }
14 //被点击div的角度
15 divs[this.index].style.transform = "rotate("+(342-(this.index*15) + this.index*15-72)+"deg)";
16
17 }
18 }
我们可以先看被点击div的角度，此时(342-(this.index*15) + this.index*15-72)等于270度，那我们将其他的div的角度都加10度，就可以了。
这个效果还是挺简单的，角度的计算那里有点绕，自己用浏览器看看每个div的角度，就会理解为什么这么写了。
源码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 body{
12 background: #666;
13 }
14 #box{
15 width: 1200px;
16 height: 700px;
17 background: url(img/bg.png) no-repeat;
18 position: relative;
19 margin: 100px auto;
20 }
21 #box div{
22 width: 400px;
23 height: 100px;
24 border-radius: 9px;
25 position: absolute;
26 left: 555px;
27 top: 444px;
28 /*
29
30 */
31 background: url(img/logo.png) no-repeat 280px 56px;
32 transform-origin: 35px 50px;
33 transition: 1s;
34 }
35 #box div:nth-of-type(1){
36 background-color: #417191;
37 }
38 #box div:nth-of-type(2){
39 background-color: #ce8298;
40 }
41 #box div:nth-of-type(3){
42 background-color: #f78992;
43 }
44 #box div:nth-of-type(4){
45 background-color: #fbc0a5;
46 }
47 #box div:nth-of-type(5){
48 background-color: #f8988f;
49 }
50 #box div:nth-of-type(6){
51 background-color: #f16273;
52 }
53 #box div:nth-of-type(7){
54 background-color: #9c9fcd;
55 }
56 #box div:nth-of-type(8){
57 background-color: #bae2d3;
58 }
59 #box div:nth-of-type(9){
60 background-color: #43bab8;
61 }
62 #box div:nth-of-type(10){
63 background-color: #678d95;
64
65 </style>
66 </head>
67 <body>
68 <div id="box">
69 <div></div>
70 <div></div>
71 <div></div>
72 <div></div>
73 <div></div>
74 <div></div>
75 <div></div>
76 <div></div>
77 <div></div>
78 <div></div>
79 </div>
80 <script>
81 window.onload = function(){
82 var box = document.getElementById(‘box‘);
83 var divs = box.getElementsByTagName(‘div‘);
84 var jilu = true;
85
86 setTimeout(function(){
87 go();
88 },1000);
89
90 //8 222 270 +48
91 //7 237 270 +33
92 //6 252 270 +18
93 // 15
94
95 //为每个div添加点击事件
96 for(var i=0;i<divs.length - 1;i++){
97 divs[i].index = i;
98 divs[i].onclick = function(){
99 for(var i = 0;i < divs.length;i++){
100 //当第i个div被点击，其他div的角度
101 if(this.index > i){
102 divs[i].style.transform = "rotate("+(342-(i*15) + this.index*15-72+10)+"deg)";
103 }
104 if( this.index < i){
105 divs[i].style.transform = "rotate("+(342-(i*15) + this.index*15-72-10)+"deg)";
106 }
107 }
108 //被点击div的角度
109 divs[this.index].style.transform = "rotate("+(342-(this.index*15) + this.index*15-72)+"deg)";
110
111 }
112 }
113
114 //点击最后一个图片，合并扇形
115 divs[9].onclick = function(){
116 if(jilu){
117 back();
118 }
119 else{
120 go();
121 }
122 jilu = !jilu;
123
124 }
125
126 //使扇形打开
127 function go(){
128 for(var i = 0;i<divs.length;i++){
129 //"rotate("+345-(i*15)+"deg)"
130 //不行，因为这样会先算"rotate("+345
131 divs[i].style.transform = "rotate("+(342-(i*15))+"deg)";
132 }
133 }
134 //是扇形合并
135 function back(){
136 for(var i=0;i<divs.length;i++){
137 divs[i].style.transform = "rotate(0deg)";
138 }
139 }
140 }
141
142
143 </script>
144 </body>
145 </html>