CSS3新特性（transform），过渡动画，动画，弹性布局，响应式

1.CSS3新特性

1）转换

[1]2D转换

二维平面移动

语法：

transform:translateX(移动的距离) translateY(移动的距离);

Transform:translate(水平移动距离，垂直移动距离)

可以设置负值，水平的正值是向右移动，垂直的正值是向下移动

二维平面旋转

语法：

Transform:rotate(30deg);

旋转原点的设置

transform-origin:center(默认值)

可以设置left,top,right,bottom,center,

百分比设置：transform-origin:水平位置的百分比垂直位置的百分比

[2]3D转换

透视点

在所看元素的父元素或者是祖先元素上设置透视点

语法:perspective: 1000px;

三维立体的移动

语法：

transform: translateZ(200px);

transform: translate3d(水平移动,垂直移动,z轴移动);

z轴：z轴垂直于屏幕，方向是射向我们。

三维立体的旋转

语法：

/*transform: rotateX(30deg);*/

/*transform: rotateY(30deg);*/

/*transform: rotateZ(30deg);*/

transform: rotate3d(1,1,1,30deg);

解析：rotate3d(x,y,z,30deg),用x,y,z建立一个用原点射向（x,y,z）这个坐标的向量，用这个向量作为轴进行旋转。

2)缩放

语法：

transform:scale(整体放大的倍数)

Transform:scale(水平缩放的倍数，垂直缩放的倍数)

3)倾斜

语法：transform: skew(15deg,0deg);

小技巧：如果先要文字板正，那么反倾斜即可

案例：

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta charset="UTF-8">
 8 
 9 <title></title>
10 
11 <style type="text/css">
12 
13 #d1{
14 
15 width: 300px;
16 
17 height: 300px;
18 
19 background: green;
20 
21 margin: 0 auto;
22 
23  
24 
25 /*倾斜*/
26 
27 transform: skew(15deg,0deg);
28 
29 }
30 
31  
32 
33 h1{
34 
35 transform: skew(-15deg,0deg);
36 
37 }
38 
39 </style>
40 
41 </head>
42 
43 <body>
44 
45 <div id="d1">
46 
47 <h1>helloworld</h1>
48 
49 </div>
50 
51 </body>
52 
53 </html>

2.过渡动画

　　Transition过渡

　　综合设置：

　　transition: all 2s;

　　分别设置：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             #d1{
 8                 width: 200px;
 9                 height: 200px;
10                 background: skyblue;
11                 transform: rotate(0deg);
12                 
13                 /*过渡效果*/
14                 /*transition:height 2s,transform 3s,background 2s;*/
15                 /*transition: all 2s linear;*/
16                 /*过渡的属性*/
17                 transition-property: all;
18                 /*过渡所消耗的时间*/
19                 transition-duration: 2s;
20                 /*过渡变化的速度
21                  linear线性速度
22                  ease/ease-in/ease-out
23                  cubic-bezier(0.57,-0.34, 0.37, 1.44)
24                  * */
25                 transition-timing-function: cubic-bezier(0.57,-0.34, 0.37, 1.44);
26                 /*过渡的延迟时间*/
27                 /*transition-delay: 2s;*/
28             }
29             /*鼠标悬浮上去的状态*/
30             #d1:hover{
31                 height: 400px;
32                 transform: rotate(360deg);
33                 background: purple;
34             }
35         </style>
36     </head>
37     <body>
38         <div id="d1">
39             
40         </div>
41     </body>
42 </html>

3.动画

Animation:动画

综合设置语法：animation: donghua 4s infinite;

分别设置：

 1 /*动画*/
 2 
 3 /*animation: donghua 5s;*/
 4 
 5 /*动画的名称*/
 6 
 7 animation-name: donghua;
 8 
 9 /*一次动画所花费的时间*/
10 
11 animation-duration: 3s;
12 
13 /*动画的速度*/
14 
15 animation-timing-function: linear;
16 
17 /*动画延迟时间*/
18 
19 animation-delay: 3s;
20 
21 /*设置动画的次数*/
22 
23 animation-iteration-count: 3;
24 
25 /*设置动画的往返*/
26 
27 animation-direction: alternate;
28 
29 /*保留最后一刻状态*/
30 
31 animation-fill-mode: forwards;

不同状态写在关键帧里

@keyframes donghua{

0%{

transform: translate(0,0);

}

50%{

transform: translate(500px,0);

}

100%{

transform: translate(500px,500px);

}

}

案例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         
 7         <style type="text/css">
 8             #d1{
 9                 width: 300px;
10                 height: 200px;
11                 background: skyblue;
12                 
13                 /*动画*/
14                 /*animation: donghua 5s;*/
15                 /*动画的名称*/
16                 animation-name: donghua;
17                 /*一次动画所花费的时间*/
18                 animation-duration: 3s;
19                 /*动画的速度*/
20                 animation-timing-function: linear;
21                 /*动画延迟时间*/
22                 animation-delay: 3s;
23                 /*设置动画的次数*/
24                 animation-iteration-count: 3;
25                 /*设置动画的往返*/
26                 animation-direction: alternate;
27                 /*保留最后一刻状态*/
28                 animation-fill-mode: forwards;
29                 
30             }
31             
32             
33             @keyframes donghua{
34                 0%{
35                     transform: translate(0,0);
36                 }
37                 50%{
38                     transform: translate(500px,0);
39                 }
40                 100%{
41                     transform: translate(500px,500px);
42                 }
43             }
44             
45         </style>
46     </head>
47     <body>
48         <div id="d1">
49             
50         </div>
51     </body>
52 </html>

4.弹性布局

1）弹性容器：

元素上设置了display:flex;的元素就是弹性容器

2）弹性子元素：

元素上设置了display:flex;的元素就是弹性容器里面的直接子元素就是弹性子元素。

语法：display:flex;

[1]主轴分布的设置：

 1 justify-content:
 2 
 3  flex-start
 4 
 5  flex-end
 6 
 7  center
 8 
 9  space-around:平均分布，两边有间距，两边的间距是中间的一半
10 
11  space-between:平均分布，两边没有间距
12 
13  space-evenly:平均分布，间距一样

[2]侧轴分布的设置：

1 Align-items:
2 
3 stretch:拉伸，会默认将没有设置高度的子元素拉伸到跟父元素一样的高度。设置了高度就没有效果
4 
5  flex-start
6 
7  flex-end
8 
9  center

[3]换行

语法：flex-warp:warp

[4]多行分布的设置：

align-content:

 flex-start

 flex-end

 center

 space-around:平均分布，两边有间距，两边的间距是中间的一半

 space-between:平均分布，两边没有间距

 space-evenly:平均分布，间距一样

2)剩余空间的占据：

Flex:数字；

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta charset="utf-8" />
 8 
 9 <title></title>
10 
11 <style type="text/css">
12 
13 .parent{
14 
15 width: 100%;
16 
17 height: 800px;
18 
19 margin: 0 auto;
20 
21 border: 1px solid #000;
22 
23  
24 
25  
26 
27 /*设置弹性容器*/
28 
29 display: flex;
30 
31  
32 
33 }
34 
35  
36 
37 .db{
38 
39 flex: 1;
40 
41 background: yellow;
42 
43 }
44 
45 .c1{
46 
47 /*占据剩余空间的1份*/
48 
49 flex: 2;
50 
51 background: green;
52 
53 }
54 
55  
56 
57 .c2{
58 
59 background: purple;
60 
61 width: 100px;
62 
63 }
64 
65  
66 
67  
68 
69 </style>
70 
71 </head>
72 
73 <body>
74 
75 <div class="parent">
76 
77 <!--db占据剩余空间3份中的1份-->
78 
79 <div class="db"></div>
80 
81 <!--c1是主要内容，占据剩余剩余空间3份中的2份-->
82 
83 <div class="child c1"></div>
84 
85 <!--假设c2是广告位，占100px宽度-->
86 
87 <div class="child c2"></div>
88 
89  
90 
91 </div>
92 
93 </body>
94 
95 </html>

3)对弹性子元素进行排序

order:数字

根据order的数字，进行从小到大排序

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             .parent{
 8                 width: 800px;
 9                 height: 800px;
10                 margin: 0 auto;
11                 border: 1px solid #000;
12                 
13                 /*设置弹性容器*/
14                 display: flex;    
15             }
16             
17             .child{
18                 width: 200px;
19                 height: 200px;
20             }
21             /*
22  对弹性子元素进行排序
23  order:数字
24  根据order的数字，进行从小到大排序
25              * */
26             .c1{
27                 background: green;
28                 order: 2;
29             }
30             
31             .c2{
32                 background: purple;
33                 order: 3;
34             }
35             
36             .c3{
37                 background: pink;
38                 order: 1;
39             }
40         </style>
41     </head>
42     <body>
43         <div class="parent">
44             <div class="child c1">1</div>
45             <div class="child c2">2</div>
46             <div class="child c3">3</div>
47             
48         </div>
49     </body>
50 </html>

5.响应式

1）移动端响应式解决方案

移动端：手机/平板/智能电视/智能手表/VR设备/AR设置

[1]视窗viewport(webstorm 快捷键：meta:vp)

width=device-width ：width等于设备的系统显示宽度

initial-scale=1 ：后面4个最终决定不允许任何的缩放。

minimum-scale=1

maximum-scale=1

user-scalable=no

案例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7     </head>
 8     <body>
 9         <h1>helloworld</h1>
10         <p>hello蔡徐坤</p>
11     </body>
12 </html>

[2]一套设计稿解决手机端的屏幕大小不一致问题

案例;

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <meta name="viewport" content="width=750,user-scalable=no" />
 7     </head>
 8     <body>
 9         <div style=" 375px;height: 375px;background: skyblue;">
10             
11         </div>
12     </body>
13 </html>

2)响应式：

不同的屏幕的大小，显示不一样的内容。

手机端：背景蓝色

手机的显示分辨率：一般小于640px

平板：紫色

平板的分辨率：一般是大于640px，小于960px

Pc：黑色

pc的分辨率：一般是大于1400px

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7         <style type="text/css">
 8             .d1{
 9                 width: 600px;
10                 height: 400px;
11                 background: orange;
12             }
13             /*媒体查询*/
14             /*小于等于640px的分辨率*/
15             
16             @media only screen and (max-640px ) {
17                 .d1{
18                     background: skyblue;
19                 }
20             }
21             
22             /*范围在640px-960px之间*/
23             @media only screen and (min- 640px) and (max- 960px) {
24                 .d1{
25                     background: purple;
26                 }
27             }
28             
29             /*大于1400px*/
30             @media only screen and (min-1400px ) {
31                 .d1{
32                     background: black;
33                 }
34             }
35         </style>
36     </head>
37     <body>
38         <div class="d1">
39             
40         </div>
41     </body>
42 </html>