四、動畫模塊

不同點:過渡必須人為的觸發才會執行動畫而動畫不需要人為的觸發
相同點:都是用來給元素添加動畫效果的
animation-name: xx;:需要執行動畫的名稱為xx

@keyframes xx
{
    from/0%{  }
    to/100%{    }
}

創建一個名稱為xx的動畫,兩種方法

1. 使用關鍵字from to相當于從0%-100%
2. 可以將0%-100%分成好多塊執行動畫

animation-duration: 時間;:動畫持續時長

三要素:

1. 告訴系統需要執行哪個動畫
2. 告訴系統我們需要自己創建一個名稱叫做xx的動畫
3. 告訴系統動畫持續的時長

其他屬性:

animation-timing-function: ease;:告訴系統動畫運動的速度,默認值為ease
animation-delay: 時間;:告訴系統延遲多長時間再執行
animation-iteration-count: 次數;:告訴系統需要執行的動畫的次數,默認值是1,infinite無限
animation-direction: normal/alternate;:告訴系統是否需要執行往返動畫,默認值是normal,alternate為往返
animation-play-state: running/paused;:告訴系統動畫是否要暫停,默認值是running
animation-fill-mode: none/forwards/backwards/both;:
none:不做任何改變
forwards:讓元素結束狀態時保留最后一幀的樣式
backwards:讓元素在等待狀態時,顯示第一幀的樣式
both:讓元素等待時顯示第一幀的樣式,結束時保留最后一幀的樣式
連寫:animation: name duration timing-function delay iteration-count direction;
連寫的簡寫:``animation: name duration;`

五、3D轉換模塊

2D是一個平面只有寬度和高度,沒有厚度
3D是一個立體,有寬度,高度,還有厚度
默認情況下所有元素都是呈2D展現的
和透視一樣,想看到某個元素的3D效果,只需要給他的父元素設置一個transform-style: flat/preserve-3d;,默認值是flat 2D顯示.

注意:

設置動畫時,動畫里的屬性會覆蓋前面的屬性
把不變的屬性寫在前面,變化的屬性寫在后面

六、背景屬性

1. 背景圖片尺寸屬性

背景尺寸屬性是CSS3中新增的一個屬性,專門用于設置背景圖片大小
不設置時默認圖片
background-size: 寬度px 高度px;:具體像素
background-size: 寬度% 高度%;:百分比為當前元素的百分比
background-size: auto 高度;:寬度等比拉伸
background-size: 寬度 auto;:高度等比拉伸
background-size: cover;:等比拉伸,直到寬度和填滿整個元素
background-size: contain;:等比拉伸,直到寬度或者高度填滿整個元素為止

2. 背景圖片定位區域

背景圖片定位區域是專門用來指定背景圖片從哪個區域開始,默認值為padding-box
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

3. 背景圖片繪制區域

背景圖片繪制區域是專門用來指定從哪個區域開始繪制背景的,默認情況下會從border區域開始繪制
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

4. 多重背景圖片

多張背景圖片之間用逗號隔開,建議在編寫多重背景時按照屬性分類拆開寫,屬性之間也用逗號隔開