CSS3過渡、動畫、2D/3D轉換
目錄
過渡模塊
跳轉到目錄
一、一些屬性
transition: 過渡屬性 過渡時長 運動速度 延遲時間;transition-property: 屬性名- 告訴系統哪個屬性需要執行過渡效果.transition-duration: 時長- 告訴系統過渡效果的持續的時長.transition-delay: 時長- 告訴系統延遲多少秒之後纔開始執行過渡動畫.transition-timing-function: 取值- 告訴系統過渡動畫的執行速度.
| 取值 | 描述 |
|---|---|
| linear | 規定以相同速度開始至結束的過渡效果 |
| ease | 規定慢速開始，然後變快，然後慢速結束的過渡效果 |
| ease-in | 規定以慢速開始的過渡效果 |
| ease-out | 規定以慢速結束的過渡效果 |
| ease-in-out | 規定以慢速開始和結束的過渡效果 |
二、使用過渡的三要素
- 必須要有屬性發生變化.
- 必須告訴系統哪個屬性需要執行過渡效果.
- 必須告訴系統過渡效果持續時長
三、注意點
當多個屬性需要同時執行過渡效果時用
,隔開即可.
div {
width: 100px;
height: 100px;
background-color: red;
transition-property: width, height, background-color;
transition-duration: 5s, 5s, 5s;
}
/* :hover這個僞類選擇器除了可以用在a標籤上, 還可以用在其它的任何標籤上 */
div:hover {
width: 200px;
height: 200px;
background-color: black;
}
四、過渡的連寫格式
transition: 過渡屬性 過渡時長 運動速度 延遲時間;
div {
width: 100px;
height: 50px;
transition: width 5s linear 0s, height 5s linear 0s, background-color 5s linear 0s;
/* 可以省略後兩個參數 */
/*transition: width 5s, background-color 5s, height 5s;*/
/* 如果多個屬性運動速度/持續時間/延遲時間相同,可以統一這樣寫 */
/*transition: all 5s;*/
}
div:hover{
width: 300px;
height: 300px;
background-color: blue;
}
- 注意點
- 和分開寫一樣, 如果想給多個屬性添加過渡效果也是用
,隔開即可 - 連寫的時可以
省略後面的兩個參數, 因爲只要編寫了前面的兩個參數就已經滿足了過渡的三要素 - 如果多個屬性運動的速度/延遲的時間/持續時間都一樣, 那麼可以簡寫爲
transition:all 0s;
五、使用過渡模塊的步驟
4. 先編寫好基本的界面
5. 修改需要過渡的屬性
6. 然後再給被修改屬性的那個元素添加過渡即可
動畫模塊
animation:動畫名稱 動畫時長 動畫運動速度 延遲時間 執行次數 往返動畫;animation-name: 動畫名- 告訴系統要執行哪個動畫.animation-duration: 時長- 告訴系統動畫持續的時長.animation-timing-function: 取值- 告訴系統動畫的執行速度.(取值同過渡動畫這個屬性的取值)animation-iteration-count: 次數- 告訴系統需要執行幾次動畫.animation-direction: 取值- 告訴系統是否需要執行往返動畫.
| 取值 | 描述 |
|---|---|
| normal | 默認的取值, 執行完一次之後回到起點繼續執行下一次. |
| alternate | 往返動畫, 執行完一次之後往回執行下一次. |
animation-play-state: 取值- 告訴系統當前動畫是否需要暫停.
| 取值 | 描述 |
|---|---|
| running | 執行動畫. |
| paused | 暫停動畫. |
animation-fill-mode: 取值- 指定動畫等待狀態和結束狀態的樣式.
| 取值 | 描述 |
|---|---|
| none | 不做任何改變 |
| forwards | 讓元素結束狀態保持動畫最後一幀的樣式 |
| backwards | 讓元素等待狀態的時候顯示動畫第一幀的樣式 |
| both | 讓元素等待狀態顯示動畫第一幀的樣式, 讓元素結束狀態保持動畫最後一幀的樣式 |
.box1 {
width: 100px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
top: 0;
animation-name: sport;
animation-duration: 5s;
}
@keyframes sport {
0% {
left: 0;
top: 0;
}
25% {
left: 300px;
top: 0;
}
50% {
left: 300px;
top: 300px;
}
75% {
left: 0;
top: 300px;
}
100% {
left: 0;
top: 0;
}
}
- 使用動畫的三個步驟
-
animation-name: 動畫名- 告訴系統要執行哪個動畫. -
告訴系統我們需要自己創建一個名稱叫做
xxx的動畫.@keyframes 動畫名 { /* margin-left: 0 到 margin-left: 500px 作的動畫 */ from{ margin-left: 0; } to{ margin-left: 500px; } } -
animation-duration: 時長- 告訴系統動畫持續的時長.
-
-
過渡和動畫之間的異同
相同點:- 兩者都是用來給元素添加
動畫的. - 兩者都是系統新增的一些屬性.
- 兩者都需要滿足三個要素纔會有動畫效果.
不同點:
- 過渡必須
人爲(設置:hover)的觸發纔會執行動畫. - 動畫不需要人爲的觸發就可以執行動畫.
- 兩者都是用來給元素添加
-
動畫模塊的連寫格式
animation:動畫名稱 動畫時長 動畫運動速度 延遲時間 執行次數 往返動畫;
和過渡模塊一樣, 也可以省略後面的參數,只保留前面的兩個參數.
animation:動畫名稱 動畫時長; -
注意點
- 如果是簡單的動畫操作,可以使用
fromto方式創建動畫@keyframes move { from{ margin-left: 0; } to{ margin-left: 500px; } } - 如果需要多個動畫操作, 可以使用
20%, 40%, 60%...方式創建動畫@keyframes myRotate { 0%{ transform: rotate(10deg); } 50%{ transform: rotate(50deg); } 100%{ transform: rotate(70deg); } }
2D轉換
-
transform: rotate(度數deg);- 旋轉多少度其中deg是單位, 代表多少度
-
transform: translate(水平方向px, 垂直方向px);- 水平垂直平移多少 -
transform: scale(水平縮放, 垂直縮放);- 按比例縮放.注意:
1、如果取值是1, 不變
2、如果取值大於1, 放大
3、如果取值小於1, 縮小
4、如果水平和垂直縮放都一樣, 那麼可以簡寫爲一個參數. -
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);- 多個轉換連寫注意:
1、如果需要進行多個轉換,那麼用空格隔開
2、2D轉換模塊會修改元素的座標系,所以旋轉之後再平移就不是水平平移的. -
形變中心點
transform-origin:水平方向取值, 垂直方向取值;
注意:
- 默認情況下所有的元素都是以自己的中心點作爲形變中心點來旋轉,我們可以通過
transform-origin:來修改旋轉的中心點. - 取值的形式
transform-origin: 200px 0px; - 具體像素
transform-origin: 50% 50%; - 百分比
transform-origin: center center; - 關鍵字ul li:first-child{ background-color: red; transform: rotate(30deg); } ul li:nth-child(2){ background-color: green; transform: rotate(50deg); } ul li:last-child{ background-color: blue; transform: rotate(70deg); }
- 旋轉軸向
默認情況下所有元素都是圍繞Z軸進行旋轉.transform:rotateZ(45deg).
如果修改X或Y軸旋轉, 換爲 rotateX或rotateY即可.perspective: 500px;- 透視屬性,近大遠小效果.
注意點:透視屬性必須添加到需要呈現近大遠小效果的元素的父元素上面
3D轉換
-
什麼是2D和3D?
2D就是一個平面, 只有寬度和高度, 沒有厚度
3D就是一個立體, 有寬度和高度, 還有厚度
默認情況下所有的元素都是呈2D展現的 -
如何讓某個元素呈3D展現
和透視一樣, 想看到某個元素的3d效果, 只需要給他的父元素添加一個transform-style屬性, 然後設置爲preserve-3d即可..father{ width: 200px; height: 200px; background-color: red; border: 1px solid #000; margin: 100px auto; perspective: 500px; transform-style: preserve-3d; transform: rotateY(80deg); } .son{ width: 100px; height: 100px; background-color: blue; border: 1px solid #000; margin: 0 auto; margin-top: 50px; transform: rotateY(45deg); }
背景尺寸屬性
跳轉到目錄
什麼是背景尺寸屬性?
背景尺寸屬性是CSS3中新增的一個屬性, 專門用於設置背景圖片大小
background-size:取值
取值:
- 具體像素: background-size:200px 100px;
- 百分比: background-size:contain;
- 寬度等比拉伸:background-size:auto 100px;
- 高度等比拉伸:background-size:100px auto;
- cover: background-size:cover;
cover含義:
1. 告訴系統圖片需要等比拉伸
2. 告訴系統圖片需要拉伸到寬度和高度都填滿元素 - contain: background-size:contain ;
contain含義:
1. 告訴系統圖片需要等比拉伸
2. 告訴系統圖片需要拉伸到寬度或高度都填滿元素
![在這裏插入圖片描述]()
背景圖片定位區域屬性
跳轉到目錄
background-origin: 取值
告訴系統背景圖片從什麼區域開始顯示, 默認情況下就是從
padding區域開始顯示
取值:
background-origin:padding-box; - 從內邊距處顯示
background-origin:border-box; - 從邊框處顯示
background-origin:content-box; - 從內容處顯示
背景繪製區域屬性
跳轉到目錄
background-clip:取值
背景繪製區域屬性是專門用於指定從哪個區域開始繪製背景的, 默認情況下會從
border區域開始繪製背景
取值:
background-clip:padding-box; - 從內邊距處繪製
background-clip:border-box; - 從邊框處繪製
background-clip:content-box; - 從內容處繪製
