第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>