CSS扇形展开效果

知识点预备:

【1】CSS3中特别重要的transform中的rotate(),现在transform可以将元素进行2D和3D变形。

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

translate():用来移动元素,可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数:translateX()translateY()

  scale():用来缩小或放大元素,可以使用元素尺寸发生变化。在此基础上有两个扩展函数:scaleX()scaleY()rotate():用来旋转元素。

  skew():用来让元素倾斜。在此基础上有两个扩展函数:skewX()skewY()

  matrix():定义矩阵变形,基于X轴和Y轴坐标重新定位元素位置。

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

  translate3d():移元素元素,用来指定一个3D变形移动位移量translate():指定3D位移在Z轴的位移量。

  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(-_-!)。

好了,准备工作做完了,开始实现扇形展开效果

第一步

基本样式布局,直接看代码

结构:

CSS扇形展开效果
 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>
CSS扇形展开效果

样式:

CSS扇形展开效果
 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;
CSS扇形展开效果

第二步

写扇形的展开函数go()和闭合函数back()

go()函数

CSS扇形展开效果
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 }
CSS扇形展开效果

我们要让每个div都按一定的角度分开不至于重叠,用(i*15)可以实现这个小目标。342是定义第一个div的位置。

back()函数

CSS扇形展开效果
1         //是扇形合并
2 function back(){
3 for(var i=0;i<divs.length;i++){
4 divs[i].style.transform = "rotate(0deg)";
5 }
6 }
7 }
CSS扇形展开效果

第三步

当点击最后一个div时,扇形收起或者打开

CSS扇形展开效果
        divs[9].onclick = function(){
if(jilu){
back();
}
else{
go();
}
jilu = !jilu; }
CSS扇形展开效果

jilu这个变量的初始值是true,用jilu这个变量是为了当点击最后一个div时,通过判断jilu的值,扇形可以收起或者打开

第四步

当点击每个div时(除了最后一个div),被点击的div旋转到270度,并且在他左右边的div距离他的位置加大。

CSS扇形展开效果
 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 }
CSS扇形展开效果

我们可以先看被点击div的角度,此时(342-(this.index*15) + this.index*15-72)等于270度,那我们将其他的div的角度都加10度,就可以了。

这个效果还是挺简单的,角度的计算那里有点绕,自己用浏览器看看每个div的角度,就会理解为什么这么写了。

源码:

CSS扇形展开效果
  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 padding: 0px; line-height: 1.5 !important;">;
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>
CSS扇形展开效果
上一篇:Logger之Logger.getLogger(CLass)技巧代替system.out.print


下一篇:Spring Cloud 微服务二:API网关spring cloud zuul