什麼是CSS動畫

• 使用CSS3技術來控制頁面元素CSS屬性的變化

CSS動畫的優勢

• 簡單：不需要掌握JavaScript也能寫動畫

• 流暢：有瀏覽器去執行動畫

• 減少程式碼量

應用場景舉例

• 網頁特效

• 使用者互動

• 抽獎動畫

• 網頁小遊戲

transition動畫

語法：transition : (property duration timing-function delay)

• transition-property ： 規定設定過度效果的CSS屬性名稱

• transition-duration ： 規定完成過度效果需要多少秒或毫秒

• transition-timing-function ： 規定速度效果的速度曲線

• transition-delay ：定義過度效果何時開始 (動畫延時)

transition-property

1.transition ：

• none : 沒有屬性會獲得過渡效果

• all : 所有屬性都將獲得過渡效果

• property : 定義應用過渡效果的CSS屬性名稱列表，列表以逗號分隔

2.transition-duration :

• ns | ms (秒|毫秒)

3.transition-timing-function ：

• linear : 線性過度 規定以相同速度開始至結束的過渡效果

• ease ： 規定慢速開始，然後變快，然後慢速結束的過渡效果

• ease-in ： 規定以慢速開始的過渡效果

• ease-out ： 規定以慢速結束的過渡效果

• ease-in-out ： 規定以慢速開始和結束的過渡效果

• cubic-bezier(n,n,n,n) ： 在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值

4.transition-delay ：

• ns | ms (秒|毫秒)

動畫觸發形式

• hover ： 滑鼠游標指向時觸發

• action ：滑鼠點選按住觸發，鬆開結束

• focus ： 鍵盤 tab 鍵

Transform動畫

語法：

transform ： none 無變化

transform-functions：

• translate(x,y) : 定義2D轉換

• translate3d(x,y,z) ：定義3D轉換

• scale(x[y]) ： 定義2D縮放

• scale3d(x,y,z) ： 定義3D縮放

• rotate(angle) ：定義旋轉 (deg-旋轉角度單位)

• skew(x,y) ： 定義2D傾斜變換

• perspeactive(n) ：定義透視檢視； 引數離物件的距離

• none ： 無變化

盒模型

1.標準盒模型 ：

• w3c盒子模型的範圍包括margin、border、padding、content,並且content部分不包含其他部分

2.IE盒模型 ：

• IE盒子模型的範圍包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border

區別： 標準盒模型寬高是content的寬高，不包含padding、border的寬高。

IE盒模型寬高不但包括content，還包括padding、border的寬高

文字陰影

語法： text-shadow：(水平片力量離 垂直偏移量 陰影虛化 陰影顏色)

示例： text-shadow(2px 2px 3px red)

背景屬性

• background-color : css設定背景顏色

• background-image : css設定圖片背景

• background-repeat : css設定背景圖片是否重複及如何重複

• background-position : css設定背景影象的位置

• background-attachment : 背景影象是否固定或者隨著頁面的其餘部分滾動

• background : 簡寫屬性，作用是將背景屬性設定在一個宣告中

背景重複

1 body {
2 
3     background-image: url('gradient2.png');
4 
5     background-repeat: repeat-x;
6 
7 }

屬性值：

• repeat 導致影象在水平垂直方向上都平鋪，預設。

• repeat-x 和 repeat-y 分別使背景影象只在水平或垂直方向上重複。

• no-repeat 則不允許影象在任何方向上平鋪。

• inherit 從父元素繼承。

背景固定

1 body {
2 
3     background-image:url('image.png');
4 
5     background-repeat:no-repeat;
6 
7     background-attachment:fixed;
8 
9 }

屬性值：

• scroll 預設。背景影象會隨著頁面其餘部分的滾動而移動。

• fixed 當頁面的其餘部分滾動時，背景影象不會移動。

• inherit 從父元素繼承