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)
| <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
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]一套设计稿解决手机端的屏幕大小不一致问题
| <meta name="viewport" content="width=750,user-scalable=no" /> |
案例;
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="width: 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-width:640px ) {
17 .d1{
18 background: skyblue;
19 }
20 }
21
22 /*范围在640px-960px之间*/
23 @media only screen and (min-width: 640px) and (max-width: 960px) {
24 .d1{
25 background: purple;
26 }
27 }
28
29 /*大于1400px*/
30 @media only screen and (min-width: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>
来源：oschina
链接：https://my.oschina.net/u/4396877/blog/3523380