CSS-彈性佈局-動畫-過渡

1.彈性佈局
1.項目的屬性
該組屬性只能設置在某項目元素上，只控制一個項目，是不影響容器以及其餘項目的效果。
1.order
做用：定義項目的排列順序，值越小，越靠近起點，默認值是0
取值：整數數字，無單位
2.flex-grow
做用：定義項目的放大比例，若是容器有足夠的空間，項目能夠放大。
取值：
整數數字，無單位。默認爲0，不放大。
取值越大，佔據剩餘的空間越多。
3.flex-shrink
做用：定義項目的縮小比例，即容器空間不足時，項目能夠縮小。縮小的比例取決於flex-shrink的值。
取值：默認值爲1，空間不足時，則等比縮小
取值爲0，則不縮小。
3.align-self
做用：定義項目在交叉軸上的對齊方式
取值：
flex-start
flex-end
center
baseline
stretch
auto 繼承父元素的align-items的效果
2.轉換
1.什麼是轉換
改變元素在頁面中的位置，大小，角度以及形狀的一種方式。
2D：只在x軸和y軸上發生的轉換效果
3D：增長z軸的轉換效果
2.轉換屬性
1.轉換屬性
屬性：transform
取值：
1.none 默認值，無任何轉換效果
2.transform-function
表示1個或多個轉換函數（若是是多個轉換函數的話，中間用空格隔開）
2.轉換原點
屬性：transform-origin
取值：數值/百分比/關鍵字
2個值：表示原點在x軸和y軸上的位置
3個值：表示原點在x軸，y軸和z軸上的位置
默認的原點在元素的中心位置處。
(50%，50%)
(center,center)
3.2D中轉換
1.位移
1.什麼是位移
改變元素在頁面中的位置
2.語法
屬性：transform
取值：
1.translate(x)
指定元素在x軸上位移距離
取值爲正，元素右移
取值爲負，元素左移
2.translate(x,y)
x:同上
y:指定元素在y軸上的位移距離
取值爲正，元素下移
取值爲負，元素上移
3.translateX(x)
4.translateY(y)
練習：在頁面中添加一個div元素，設置元素往右位移120px,往下位移100px。
2.縮放
1.什麼是縮放
改變元素在頁面中的尺寸
2.語法
屬性：transform
取值：
1.scale(value)
value 橫向和縱向的縮放比例
value 默認值爲1
>1 表示放大
<1 表示縮小
負數：放大（水平和垂直方向都翻轉180度）
2.scale(x,y)
x：橫向縮放比例
y：縱向縮放比例
3.scaleX(x)
4.scaleY(y)
3.旋轉
1.什麼是旋轉
改變元素在頁面上角度
2.語法
屬性：transform
取值：
1.rotate(ndeg)
n取值爲正，順時針旋轉
n取值爲負，逆時針旋轉
注意：
1.轉換原點會影響最後的轉換效果
2.旋轉是連同座標軸一同旋轉的，會影響旋轉後的位移效果。

練習：
1.將d1先旋轉45deg，再向右位移50px
2.將d2先位移50px，再旋轉45deg，對比效果
4.傾斜
1.什麼是傾斜
改變元素在頁面中的形狀
2.語法
屬性：transform
取值：skewX(xdeg)
讓元素向着x軸產生傾斜，實際上改變的是y軸的傾斜角度
x取值爲正，y軸逆時針傾斜
x取值爲負，y軸順時針傾斜
skewY(ydeg)
讓元素向着y軸產生傾斜，實際上改變的是x軸的傾斜角度
y取值爲正，x軸順時針傾斜
y取值爲負，x軸逆時針傾斜
skew(x,y)
skew(x) 等同於skewX(x)
練習：
頁面上建立一個200*200的div，設置背景顏色，鼠標懸停時，該元素向右偏移200px,向下偏移200px,旋轉135deg,向x軸傾斜45deg,同時放大1.5倍，查看效果。
4.3D轉換
1.透視距離
模擬人的眼睛到3D轉換元素之間的距離
屬性：perspective
取值：以px爲單位的數字
注意：該屬性要加在3d轉換元素的父元素上
2.3D旋轉
屬性：transform
取值：
1.rotateX(xdeg)
以x軸爲中心軸，旋轉元素的角度
2.rotateY(ydeg)
以y軸爲中心軸，旋轉元素的角度
3.rotateZ(zdeg)
以z軸爲中心軸，旋轉元素的角度
4.rotate3D(x,y,z,ndeg)
x,y,z取值爲大於0的數字時，表示該軸參與旋轉，取值爲0則不參與旋轉。
3.過渡
1.什麼是過渡
使得CSS屬性值，在一段時間內平緩變化的效果。
2.過渡屬性
1.指定過渡屬性
做用：指定哪一個屬性值在發生改變時須要使用過渡效果來體現。
屬性：transition-property
取值：
1.all 能使用過渡的屬性，一概用過渡體現
2.具體屬性名
ex:
transition-property:background;
transition-property:border-radius;
容許設置過渡效果的屬性：
1.顏色屬性（背景顏色，字體顏色，邊框顏色，陰影顏色）
2.取值爲數字的屬性
3.轉換屬性
4.陰影屬性
5.漸變屬性
6.visibility屬性
2.指定過渡時長
做用：指定在多長時間內完成過渡操做
屬性：transition-duration
取值：以s或ms爲單位的數字
1000ms=1s
3.指定過渡的時間曲線函數
屬性：transition-timing-function
取值：
1.ease 默認值，慢速開始，快速變快，慢速結束
2.linear 勻速
3.ease-in 慢速開始，加速結束
4.ease-out 快速開始，慢速結束
5.ease-in-out 慢速開始和結束，中間先加速後減速
4.指定過渡延遲時間
屬性：transition-delay
取值：以s或ms爲單位的數字

注意：
1.將過渡放在元素聲明的樣式中
既管去，又管回
2.將過渡放在觸發的操做中（hover）
只管去，無論回
5.過渡屬性的縮寫
transition：property duration timing-function delay;
ex:
transition:all 2s;
練習：
1.在頁面中建立一個100*100的元素
2.鼠標懸停時，5s以內，向右偏移500px同時再旋轉3圈。
3.鼠標移出時，還能滾回來。
4.動畫
1.什麼是動畫
使用元素從一種樣式逐漸變化爲另外一種樣式
即將多個過渡效果放在一塊兒
動畫是經過關鍵幀，來控制動畫的每一步。
"關鍵幀"：
1.動畫執行的時間點
2.在該時間點上的樣式是什麼
2.動畫的使用步驟
1.聲明動畫
爲動畫起名
定義關鍵幀

@keyframes 動畫名稱{
/*定義動畫全部的關鍵幀*/
0%{
/*動畫開始時元素的樣式*/
}
50%{
/*動畫執行到一半時元素的樣式*/
}
100%{
/*動畫結束時的樣式*/
}
}

2.爲元素調用動畫
指定元素調用的動畫名稱
調用動畫屬性：
1.animation-name
做用：指定調用動畫名稱
2.animation-duration
做用：指定動畫執行一個週期的時長
取值：以s或ms爲單位的數字
3.animation-timing-function
做用：指定動畫的速度事件曲線函數
取值：ease,linear,ease-in,ease-out,ease-in-out;
4.animation-delay
做用：指定動畫的延遲時間
取值：以s或ms爲單位的數字
5.animation-iteration-count
做用：指定動畫的播放次數
取值：
1.具體數字
2.infinite 無限次播放
6.animation-direction
做用：指定動畫的播放方向
取值：
1.normal 默認值，正常播放0%-100%
2.reverse 逆向播放100%-0%
3.alternate 輪流播放
奇數次播放時，正常播放
偶數次播放時，逆向播放
7.動畫簡寫方式
animation:name duration timing-function delay iteration-count direction;
ex:
animation:change 3s;
8.animation-fill-mode
做用：規定動畫在播放前或播放後的狀態
取值：
1.none 默認值
2.forwards 動畫播放完以後，將保持在最後一個幀的狀態上。
3.backwards 動畫播放前，延遲時間內，動畫保持在第一個幀的狀態上。
4.both forwards和backwrads的結合體
9.animation-play-state
做用：指定動畫是處於播放仍是暫停的狀態上
取值：
1.paused 暫停
2.running 播放

1.彈性佈局
1.項目的屬性
該組屬性只能設置在某項目元素上，只控制一個項目，是不影響容器以及其餘項目的效果。
1.order
做用：定義項目的排列順序，值越小，越靠近起點，默認值是0
取值：整數數字，無單位
2.flex-grow
做用：定義項目的放大比例，若是容器有足夠的空間，項目能夠放大。
取值：
整數數字，無單位。默認爲0，不放大。
取值越大，佔據剩餘的空間越多。
3.flex-shrink
做用：定義項目的縮小比例，即容器空間不足時，項目能夠縮小。縮小的比例取決於flex-shrink的值。
取值：默認值爲1，空間不足時，則等比縮小
取值爲0，則不縮小。
3.align-self
做用：定義項目在交叉軸上的對齊方式
取值：
flex-start
flex-end
center
baseline
stretch
auto 繼承父元素的align-items的效果
2.轉換
1.什麼是轉換
改變元素在頁面中的位置，大小，角度以及形狀的一種方式。
2D：只在x軸和y軸上發生的轉換效果
3D：增長z軸的轉換效果
2.轉換屬性
1.轉換屬性
屬性：transform
取值：
1.none 默認值，無任何轉換效果
2.transform-function
表示1個或多個轉換函數（若是是多個轉換函數的話，中間用空格隔開）
2.轉換原點
屬性：transform-origin
取值：數值/百分比/關鍵字
2個值：表示原點在x軸和y軸上的位置
3個值：表示原點在x軸，y軸和z軸上的位置
默認的原點在元素的中心位置處。
(50%，50%)
(center,center)
3.2D中轉換
1.位移
1.什麼是位移
改變元素在頁面中的位置
2.語法
屬性：transform
取值：
1.translate(x)
指定元素在x軸上位移距離
取值爲正，元素右移
取值爲負，元素左移
2.translate(x,y)
x:同上
y:指定元素在y軸上的位移距離
取值爲正，元素下移
取值爲負，元素上移
3.translateX(x)
4.translateY(y)
練習：在頁面中添加一個div元素，設置元素往右位移120px,往下位移100px。
2.縮放
1.什麼是縮放
改變元素在頁面中的尺寸
2.語法
屬性：transform
取值：
1.scale(value)
value 橫向和縱向的縮放比例
value 默認值爲1
>1 表示放大
<1 表示縮小
負數：放大（水平和垂直方向都翻轉180度）
2.scale(x,y)
x：橫向縮放比例
y：縱向縮放比例
3.scaleX(x)
4.scaleY(y)
3.旋轉
1.什麼是旋轉
改變元素在頁面上角度
2.語法
屬性：transform
取值：
1.rotate(ndeg)
n取值爲正，順時針旋轉
n取值爲負，逆時針旋轉
注意：
1.轉換原點會影響最後的轉換效果
2.旋轉是連同座標軸一同旋轉的，會影響旋轉後的位移效果。

練習：
1.將d1先旋轉45deg，再向右位移50px
2.將d2先位移50px，再旋轉45deg，對比效果
4.傾斜
1.什麼是傾斜
改變元素在頁面中的形狀
2.語法
屬性：transform
取值：skewX(xdeg)
讓元素向着x軸產生傾斜，實際上改變的是y軸的傾斜角度
x取值爲正，y軸逆時針傾斜
x取值爲負，y軸順時針傾斜
skewY(ydeg)
讓元素向着y軸產生傾斜，實際上改變的是x軸的傾斜角度
y取值爲正，x軸順時針傾斜
y取值爲負，x軸逆時針傾斜
skew(x,y)
skew(x) 等同於skewX(x)
練習：
頁面上建立一個200*200的div，設置背景顏色，鼠標懸停時，該元素向右偏移200px,向下偏移200px,旋轉135deg,向x軸傾斜45deg,同時放大1.5倍，查看效果。
4.3D轉換
1.透視距離
模擬人的眼睛到3D轉換元素之間的距離
屬性：perspective
取值：以px爲單位的數字
注意：該屬性要加在3d轉換元素的父元素上
2.3D旋轉
屬性：transform
取值：
1.rotateX(xdeg)
以x軸爲中心軸，旋轉元素的角度
2.rotateY(ydeg)
以y軸爲中心軸，旋轉元素的角度
3.rotateZ(zdeg)
以z軸爲中心軸，旋轉元素的角度
4.rotate3D(x,y,z,ndeg)
x,y,z取值爲大於0的數字時，表示該軸參與旋轉，取值爲0則不參與旋轉。
3.過渡
1.什麼是過渡
使得CSS屬性值，在一段時間內平緩變化的效果。
2.過渡屬性
1.指定過渡屬性
做用：指定哪一個屬性值在發生改變時須要使用過渡效果來體現。
屬性：transition-property
取值：
1.all 能使用過渡的屬性，一概用過渡體現
2.具體屬性名
ex:
transition-property:background;
transition-property:border-radius;
容許設置過渡效果的屬性：
1.顏色屬性（背景顏色，字體顏色，邊框顏色，陰影顏色）
2.取值爲數字的屬性
3.轉換屬性
4.陰影屬性
5.漸變屬性
6.visibility屬性
2.指定過渡時長
做用：指定在多長時間內完成過渡操做
屬性：transition-duration
取值：以s或ms爲單位的數字
1000ms=1s
3.指定過渡的時間曲線函數
屬性：transition-timing-function
取值：
1.ease 默認值，慢速開始，快速變快，慢速結束
2.linear 勻速
3.ease-in 慢速開始，加速結束
4.ease-out 快速開始，慢速結束
5.ease-in-out 慢速開始和結束，中間先加速後減速
4.指定過渡延遲時間
屬性：transition-delay
取值：以s或ms爲單位的數字

注意：
1.將過渡放在元素聲明的樣式中
既管去，又管回
2.將過渡放在觸發的操做中（hover）
只管去，無論回
5.過渡屬性的縮寫
transition：property duration timing-function delay;
ex:
transition:all 2s;
練習：
1.在頁面中建立一個100*100的元素
2.鼠標懸停時，5s以內，向右偏移500px同時再旋轉3圈。
3.鼠標移出時，還能滾回來。
4.動畫
1.什麼是動畫
使用元素從一種樣式逐漸變化爲另外一種樣式
即將多個過渡效果放在一塊兒
動畫是經過關鍵幀，來控制動畫的每一步。
"關鍵幀"：
1.動畫執行的時間點
2.在該時間點上的樣式是什麼
2.動畫的使用步驟
1.聲明動畫
爲動畫起名
定義關鍵幀

@keyframes 動畫名稱{
/*定義動畫全部的關鍵幀*/
0%{
/*動畫開始時元素的樣式*/
}
50%{
/*動畫執行到一半時元素的樣式*/
}
100%{
/*動畫結束時的樣式*/
}
}

2.爲元素調用動畫
指定元素調用的動畫名稱
調用動畫屬性：
1.animation-name
做用：指定調用動畫名稱
2.animation-duration
做用：指定動畫執行一個週期的時長
取值：以s或ms爲單位的數字
3.animation-timing-function
做用：指定動畫的速度事件曲線函數
取值：ease,linear,ease-in,ease-out,ease-in-out;
4.animation-delay
做用：指定動畫的延遲時間
取值：以s或ms爲單位的數字
5.animation-iteration-count
做用：指定動畫的播放次數
取值：
1.具體數字
2.infinite 無限次播放
6.animation-direction
做用：指定動畫的播放方向
取值：
1.normal 默認值，正常播放0%-100%
2.reverse 逆向播放100%-0%
3.alternate 輪流播放
奇數次播放時，正常播放
偶數次播放時，逆向播放
7.動畫簡寫方式
animation:name duration timing-function delay iteration-count direction;
ex:
animation:change 3s;
8.animation-fill-mode
做用：規定動畫在播放前或播放後的狀態
取值：
1.none 默認值
2.forwards 動畫播放完以後，將保持在最後一個幀的狀態上。
3.backwards 動畫播放前，延遲時間內，動畫保持在第一個幀的狀態上。
4.both forwards和backwrads的結合體
9.animation-play-state
做用：指定動畫是處於播放仍是暫停的狀態上
取值：
1.paused 暫停
2.running 播放