第07章-前端核心技术-CSS动画特效
学习目标
- 掌握CSS3特效的制作
重点 - 掌握CSS3各种转换的特效
重点 - 掌握CSS3动画的制作
重点 - 掌握CSS3渐变色的使用
- 掌握CSS3响应式设计
难点
CSS3 过渡transition
过渡属性
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
案例01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变换</title>
<style> div { width: 100px; background: blue; -webkit-transition: width 2s linear 1s, background-color 2s linear 1s; <span class="hljs-rule"><span class="hljs-attribute">transition</span>:<span class="hljs-value"> width <span class="hljs-number">2s</span> linear <span class="hljs-number">1s</span>,
background-color <span class="hljs-number">2s</span> linear <span class="hljs-number">1s</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">div</span><span class="hljs-pseudo">:hover</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">200px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> red</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">img</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100%</span></span></span>;
<span class="hljs-rule">}</span></span>
</span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"><<span class="hljs-title">b</span>></span>注意：<span class="hljs-tag"></<span class="hljs-title">b</span>></span>无法在 IE9 及更早 IE 版本上工作。<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"image/avatar.jpg"</span> /></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
</html>
效果图
CSS3 转换transform
转换属性
| Property | 描述 |
|---|---|
| transform | 适用于2D或3D转换的元素 |
2D 转换
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 2D 转换，使用六个值的矩阵。（选修） |
| translate(x,y) | 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 2D 转换，沿着 Y 轴移动元素。 |
| scaleX(n) | 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 2D 倾斜转换，沿着 Y 轴。 |
translate(?px/%) 位置变换
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
rotate(?deg) 旋转
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
scale(x,y) 尺寸改变
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
skew(?deg,?deg) 倾斜
transform:skew(angle [,angle]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
- skewX(angle);表示只在X轴(水平方向)倾斜。
- skewY(angle);表示只在Y轴(垂直方向)倾斜。
3D转换
CSS3 transform-style 属性
| 值 | 描述 |
|---|---|
| flat | 表示所有子元素在2D平面呈现。 |
| preserve-3d | 表示所有子元素在3D空间中呈现。 |
3D 转换方法
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 3D 转化。 |
| translateX(x) | 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 3D 缩放转换。 |
| scaleX(x) | 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 3D 转换元素的透视视图。 |
transform-origin
transform-origin属性用于设置3D变换的中心位置
transform-origin: x-axis y-axis z-axis;
| 值 | 描述 |
|---|---|
| x-axis | 定义视图被置于 X 轴的何处。可能的值：leftcenterrightlength% |
| y-axis | 定义视图被置于 Y 轴的何处。可能的值：topcenterbottomlength% |
| z-axis | 定义视图被置于 Z 轴的何处。可能的值：length |
案例02
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span><span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"css/index.css"</span>/></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Css3 Transform<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-comment"><!-- Rotate--></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotate"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>rotate(45deg) <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotateX"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>rotateX(45deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotateY"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>rotateY(45deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotateZ"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>rotateZ(45deg) <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!-- scale--></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box scale"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>scale(2)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box scaleX"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>scaleX(2) <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box scaleY"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>scaleY(2) <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!-- skew--></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box skew"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>skew(45deg, 45deg) <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box skewX"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>skewX(45deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box skewY"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>skewY(45deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!-- translate--></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box translate"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>translate(45px) <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box translateX"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>translateX(45px)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box translateY"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>translateY(45px)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box matrix"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span> matrix(2, 2, 0, 2, 45, 0)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h4</span>></span>Perspective : 100<span class="hljs-tag"></<span class="hljs-title">h4</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"perspective-100"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotateX"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>rotateX(90deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotateY"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>rotateY(45deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h4</span>></span>Perspective : 200<span class="hljs-tag"></<span class="hljs-title">h4</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"perspective-200"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotateX"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>rotateX(90deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotateY"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>rotateY(45deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!-- transform origin--></span>
<span class="hljs-tag"><<span class="hljs-title">h2</span>></span>Transform origin<span class="hljs-tag"></<span class="hljs-title">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotate"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill to-100-0-0"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>transform-origin : 100% 0 0 <span class="hljs-tag"><<span class="hljs-title">br</span>/></span>rotate(45deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotate"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill to-0-100-0"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>transform-origin : 0 100% 0<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>rotate(45deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card perspective-200"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotateX"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill to-0-100-0"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>transform-origin : 0 100% 0<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>rotateX(45deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card perspective-200"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotateX"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill to-100-0-0"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>transform-origin : 0 100% 0<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>rotateX(45deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card perspective-200"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotateY"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill to-0-100-0"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>transform-origin : 0 100% 0 <span class="hljs-tag"><<span class="hljs-title">br</span>/></span>rotateY(45deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card perspective-200"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box rotateY"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill to-100-0-0"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>transform-origin : 100% 0 0<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>rotateY(45deg)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box scale"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill to-100-0-0"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>transform-origin : 100% 0 0<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>scale(2)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box scale"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill to-0-100-0"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>transform-origin : 0 100% 0<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>scale(2)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box scaleX"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill to-100-0-0"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>transform-origin : 100% 0 0<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>scaleX(2)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box scaleX"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill to-0-100-0"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>transform-origin : 0 100% 0<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>scaleX(2)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box scaleY"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill to-100-0-0"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>transform-origin : 100% 0 0<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>scaleY(2)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"card"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"box scaleY"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fill to-0-100-0"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>transform-origin : 0 100% 0<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>scaleY(2)<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
</html>
效果图
CSS3 动画
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
CSS3的动画属性
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。Infinite:无限循环 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”、“paused”。 | 3 |
animation-timing-function
指定动画将如何完成一个周期。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| step-start | 只显示动画第一帧 |
| step-end | 只显示动画最后一帧 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
1
2
3
4
5
6
7
8
9
10
11
#div1 {animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2 {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
#div1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2 {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
animation-fill-mode
| 值 | 描述 |
|---|---|
| none | 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 |
| forwards | 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 |
| backwards | 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。 |
| both | 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 |
animation-direction 属性
| 值 | 描述 |
|---|---|
| normal | 默认值。动画按正常播放。 |
| reverse | 动画反向播放。 |
| alternate | 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。 |
| alternate-reverse | 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。 |
animation-play-state 属性
| 值 | 描述 |
|---|---|
| paused | 指定暂停动画 |
| running | 指定正在运行的动画 |
案例03
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<style> div { width: 100px; height: 100px; background: red; position: relative; animation: myfirst 5s; -webkit-animation: myfirst 5s; animation-iteration-count: infinite; } @keyframes myfirst { 0% { background: red; left: 0px; top: 0px; } 25% { background: yellow; left: 200px; top: 0px; } 50% { background: blue; left: 200px; top: 200px; } 75% { background: green; left: 0px; top: 200px; } 100% { background: red; left: 0px; top: 0px; } } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% { background: red; left: 0px; top: 0px; } 25% { background: yellow; left: 200px; top: 0px; } 50% { background: blue; left: 200px; top: 200px; } 75% { background: green; left: 0px; top: 200px; } 100% { background: red; left: 0px; top: 0px; } } </style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
效果展示
案例04
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style> div { width: 100px; height: 100px; background: red; position: relative; animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; } @keyframes myfirst { 0% {background: red;left: 0px;top: 0px;} 25% {background: yellow;left: 200px;top: 0px;} 50% {background: blue;left: 200px;top: 200px;} 75% {background: green;left: 0px;top: 200px;} 100% {background: red;left: 0px;top: 0px;} } @-webkit-keyframes myfirst{ 0% {background: red;left: 0px;top: 0px;} 25% {background: yellow;left: 200px;top: 0px;} 50% {background: blue;left: 200px;top: 200px;} 75% {background: green;left: 0px;top: 200px;} 100% {background: red;left: 0px;top: 0px;} } </style>
</head>
<body>
<p>注意:该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
效果展示
CSS3 渐变（Gradients）
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
语法
background: linear-gradient(direction direction, color stop1, color stop2, ...);
线性渐变 - 从上到下（默认情况下）
案例05
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渐变</title>
<style> #grad1 { height: 200px; background: -webkit-linear-gradient(left top,red 20%, blue 80%); background: -o-linear-gradient(left top,red 20%, blue 80%); background: -moz-linear-gradient(left top,red 20%, blue 80%); background: linear-gradient(left top,red 20%, blue 80%); /* 标准的语法（必须放在最后） */ } </style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
</body>
</html>
效果图
使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
background: linear-gradient(angle, color stop1, color stop2);
角度是指水平线和渐变线之间的角度，逆时针方向计算。
1
2
3
4
5
6
#grad { background: -webkit-linear-gradient(180deg, red 30px, blue 120px); background: -o-linear-gradient(180deg, red 30px, blue 120px); background: -moz-linear-gradient(180deg, red 30px, blue 120px); background: linear-gradient(180deg, red 30px, blue 120px); }
重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
1
2
3
4
5
6
#grad { background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); background: repeating-linear-gradient(red, yellow 10%, green 20%); }
径向渐变
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
语法
background: radial-gradient(position position, shape size, startColor size, ..., lastColor size);
径向渐变 - 颜色结点均匀分布（默认情况下）
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
######
size 参数定义了渐变的大小。它可以是以下四个值：
- closest-side - 靠近最近的边
- farthest-side - 靠近最远的边
- closest-corner - 靠近最近的角
- farthest-corner - 靠近最远的角
1
2
3
4
5
6
#grad1 { background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); }
重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：
1
2
3
4
5
6
7
css
#grad { background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); background: repeating-radial-gradient(red, yellow 10%, green 15%); }
CSS3 媒体查询
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。
媒体查询可用于检测很多事情，例如：
- viewport(视窗) 的宽度与高度
- 设备的宽度与高度
- 朝向 (智能手机横屏，竖屏)
- 分辨率
目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。
@media not|only mediatype and (expressions) { CSS 代码...; }
CSS3 多媒体类型
| 值 | 描述 |
|---|---|
| all | 用于所有多媒体类型设备 |
| 用于打印机 | |
| screen | 用于电脑屏幕，平板，智能手机等。 |
| speech | 用于屏幕阅读器CSS3 多媒体类型 |
CSS3 多媒体参数类型
| 值 | 描述 |
|---|---|
| not | not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备） |
| only | 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。 |
| all | 所有设备，这个应该经常看到。 |
也可以在不同的媒体上使用不同的样式文件：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
常用尺寸
常用于图片流
1
2
3
4
5
@media all and (max-width: 1690px) { ... }
@media all and (max-width: 1280px) { ... }
@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }
常用于稍微复杂的基本响应
1
2
3
4
5
6
@media all and (min-width:1200px){ ... }
@media all and (min-width: 960px) and (max-width: 1199px) { ... }
@media all and (min-width: 768px) and (max-width: 959px) { ... }
@media all and (min-width: 480px) and (max-width: 767px){ ... }
@media all and (max-width: 599px) { ... }
@media all and (max-width: 479px) { ... }
基于Bootstrap 3.x 全球主流框架
1
2
3
@media all and (max-width: 991px) { ... }
@media all and (max-width: 768px) { ... }
@media all and (max-width: 480px) { ... }
基于Bootstrap 4.x 全球主流框架
1
2
3
4
@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }
移动端页面制作字号大小设定问题，设计稿文字字号规范，解决移动端大小屏适配问题
```css
逻辑分辨率：320*480 《==》 物理分辨率：640*690 最小字号：12px
逻辑分辨率：320*658 《==》 物理分辨率：640*1136 最小字号：12px
逻辑分辨率：375*667 《==》 物理分辨率：750*1334 最小字号：14px(13.5px)
逻辑分辨率：414*736 《==》 物理分辨率：1242*2208（1080*1920） 最小字号：15px
前端按照逻辑分辨率设字号大小《==》rem进行适配移动端大小屏幕；
```
1
2
3
4
5
@media screen and (min-width: 480px) {
body { background-color: lightgreen; }
}
在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色
案例06
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>媒体查询</title>
<style> ul { list-style-type: none; } ul li a { color: green; text-decoration: none; padding: 3px; display: block; } @media screen and (min-width: 240px) and (max-width: 320px),(min-width: 700px) { ul li a { padding-left: 30px; color: blue; background: url(image/email-icon.png) left center no-repeat; } } @media screen and (min-width: 320px) and (max-width: 480px) { ul li a { color: red; } ul li a:before { content: "邮箱:"; font-style: italic; color: #666666; } } @media screen and (min-width: 480px) and (max-width: 640px) { ul li a:before { content: "邮箱:"; font-style: italic; color: lightcoral; } ul li a:after { content: " (" attr(data-email) ")"; font-size: 12px; font-style: italic; color: #666666; } } @media screen and (min-width: 640px) { ul li a:before { content: "邮箱:"; font-style: italic; color: lightcoral; padding-left: 30px; background: url(image/email-icon.png) left center no-repeat; } ul li a:after { content: " (" attr(data-email) ")"; font-size: 12px; font-style: italic; color: #666666; } } </style>
</head>
<body>
<ul>
<li><a data-email="johndoe@qq.com" href="mailto:johndoe@qq.com">张三</a></li>
<li><a data-email="marymoe@qq.com" href="mailto:marymoe@qq.com">李四</a></li>
<li><a data-email="amandapanda@qq.com" href="mailto:amandapanda@qq.com">王五</a></li>
</ul>
</body>
</html>
效果图
Animate.css插件
Animate.css是某位大牛写好的动画效果集合，需要的时候可以直接下载导入到项目中，在需要的元素上添加相关的类即可使用相对应的动画效果。
如：
<div id="test" class="animated infinite bounce ">bounce</div>
- animated：表示使用Animate.css的动画
- infinite：表示动画效果无限循环
- bounce：是动画效果
动画效果有很多，下面的案例就展示了各种动画效果
案例07
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span><span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"css/animate.min.css"</span> /></span>
<span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
<span class="hljs-id">#content</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-number">20%</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#test</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">50%</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">100px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> auto</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-function">rgba</span>(<span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">0.2</span>)</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">select</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> block</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">45px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> auto</span></span>;
<span class="hljs-rule">}</span></span>
</span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'select'</span>).onchange = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
val = <span class="hljs-keyword">this</span>.options[<span class="hljs-keyword">this</span>.selectedIndex].value;
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'test'</span>).setAttribute(<span class="hljs-string">'class'</span>,<span class="hljs-string">'animated infinite '</span>+val);
}
}
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"content"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"test"</span>></span>bounce<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">select</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"select"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Attention Seekers"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"bounce"</span>></span>bounce<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"flash"</span>></span>flash<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"pulse"</span>></span>pulse<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rubberBand"</span>></span>rubberBand<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"shake"</span>></span>shake<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"swing"</span>></span>swing<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"tada"</span>></span>tada<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"wobble"</span>></span>wobble<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"jello"</span>></span>jello<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Bouncing Entrances"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"bounceIn"</span>></span>bounceIn<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"bounceInDown"</span>></span>bounceInDown<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"bounceInLeft"</span>></span>bounceInLeft<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"bounceInRight"</span>></span>bounceInRight<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"bounceInUp"</span>></span>bounceInUp<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Bouncing Exits"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"bounceOut"</span>></span>bounceOut<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"bounceOutDown"</span>></span>bounceOutDown<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"bounceOutLeft"</span>></span>bounceOutLeft<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"bounceOutRight"</span>></span>bounceOutRight<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"bounceOutUp"</span>></span>bounceOutUp<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Fading Entrances"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeIn"</span>></span>fadeIn<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeInDown"</span>></span>fadeInDown<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeInDownBig"</span>></span>fadeInDownBig<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeInLeft"</span>></span>fadeInLeft<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeInLeftBig"</span>></span>fadeInLeftBig<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeInRight"</span>></span>fadeInRight<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeInRightBig"</span>></span>fadeInRightBig<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeInUp"</span>></span>fadeInUp<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeInUpBig"</span>></span>fadeInUpBig<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Fading Exits"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeOut"</span>></span>fadeOut<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeOutDown"</span>></span>fadeOutDown<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeOutDownBig"</span>></span>fadeOutDownBig<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeOutLeft"</span>></span>fadeOutLeft<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeOutLeftBig"</span>></span>fadeOutLeftBig<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeOutRight"</span>></span>fadeOutRight<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeOutRightBig"</span>></span>fadeOutRightBig<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeOutUp"</span>></span>fadeOutUp<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"fadeOutUpBig"</span>></span>fadeOutUpBig<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Flippers"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"flip"</span>></span>flip<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"flipInX"</span>></span>flipInX<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"flipInY"</span>></span>flipInY<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"flipOutX"</span>></span>flipOutX<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"flipOutY"</span>></span>flipOutY<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Lightspeed"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"lightSpeedIn"</span>></span>lightSpeedIn<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"lightSpeedOut"</span>></span>lightSpeedOut<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Rotating Entrances"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rotateIn"</span>></span>rotateIn<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rotateInDownLeft"</span>></span>rotateInDownLeft<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rotateInDownRight"</span>></span>rotateInDownRight<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rotateInUpLeft"</span>></span>rotateInUpLeft<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rotateInUpRight"</span>></span>rotateInUpRight<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Rotating Exits"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rotateOut"</span>></span>rotateOut<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rotateOutDownLeft"</span>></span>rotateOutDownLeft<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rotateOutDownRight"</span>></span>rotateOutDownRight<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rotateOutUpLeft"</span>></span>rotateOutUpLeft<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rotateOutUpRight"</span>></span>rotateOutUpRight<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Sliding Entrances"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"slideInUp"</span>></span>slideInUp<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"slideInDown"</span>></span>slideInDown<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"slideInLeft"</span>></span>slideInLeft<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"slideInRight"</span>></span>slideInRight<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Sliding Exits"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"slideOutUp"</span>></span>slideOutUp<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"slideOutDown"</span>></span>slideOutDown<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"slideOutLeft"</span>></span>slideOutLeft<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"slideOutRight"</span>></span>slideOutRight<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Zoom Entrances"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"zoomIn"</span>></span>zoomIn<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"zoomInDown"</span>></span>zoomInDown<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"zoomInLeft"</span>></span>zoomInLeft<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"zoomInRight"</span>></span>zoomInRight<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"zoomInUp"</span>></span>zoomInUp<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Zoom Exits"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"zoomOut"</span>></span>zoomOut<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"zoomOutDown"</span>></span>zoomOutDown<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"zoomOutLeft"</span>></span>zoomOutLeft<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"zoomOutRight"</span>></span>zoomOutRight<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"zoomOutUp"</span>></span>zoomOutUp<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"><<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">"Specials"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"hinge"</span>></span>hinge<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"jackInTheBox"</span>></span>jackInTheBox<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rollIn"</span>></span>rollIn<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"rollOut"</span>></span>rollOut<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">optgroup</span>></span>
<span class="hljs-tag"></<span class="hljs-title">select</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
</html>
效果展示
Wow.js插件
Wow.js是javascript动画插件，经常配合animate.css一起使用。动画效果会在元素第一次出现在页面中时起作用。
Wow.js的使用方法
- 引入wow.js
- 在需要使用的元素上添加
class=”wow” - 使用js初始化
案例08
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span><span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"css/animate.min.css"</span> /></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/wow.min.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
<span class="hljs-id">#content</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-number">20%</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#test</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">50%</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">100px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> auto</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-function">rgba</span>(<span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">0.2</span>)</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
<span class="hljs-rule">}</span></span>
</span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-keyword">var</span> wow = <span class="hljs-keyword">new</span> WOW({
boxClass: <span class="hljs-string">'wow'</span>, <span class="hljs-comment">// 动画使用的class</span>
animateClass: <span class="hljs-string">'animated infinite'</span>, <span class="hljs-comment">// 附加的class</span>
offset: <span class="hljs-number">0</span>, <span class="hljs-comment">// 当元素进入页面多少位置的时候开始动画，默认0</span>
mobile: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 是否在移动设备上显示动画效果，默认true</span>
live: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 是否异步加载内容，默认true</span>
callback: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(box)</span> </span>{},
scrollContainer: <span class="hljs-literal">null</span>
});
wow.init();
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"content"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"test"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"wow bounce"</span>></span>bounce<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
</html>
作业
制作特色菜单
制作动画效果
制作自适应网页（根据屏幕尺寸改变样式）
实现如下小球碰撞弹跳效果
实现如下梦幻西游动画界面
实现水滴特效
实现选择的立方体
实现动画的登录
实现渐变球体
实现移动的进度条
实现水波纹按钮动画
</article>