目錄
1. css3現狀
* 在css2的基礎上新增（擴展）樣式
* 移動端支持優於PC端
* 不斷改進且應用相對廣泛
2. 屬性選擇器
| 選擇符 | 簡介 |
|---|---|
| E[att] | 選擇具有att屬性的元素 |
| E[att="val"] | 選擇具有att屬性且屬性值等於val的E元素 |
| E[att^="val"] | 匹配具有att屬性、且值以val開頭的E元素 |
| E[att$="val"] | 匹配具有att屬性、且值以val結尾的E元素 |
| E[att*="val"] | 匹配具有att屬性、且值中含有val的E元素 |
類選擇器、屬性選擇器、僞類選擇器，權重爲 10
3. 結構僞類選擇器
| 選擇符 | 簡介 |
|---|---|
| E:first-child | 匹配父元素中的第一個子元素E |
| E:last-child | 匹配父元素中最後一個E元素 |
| E:nth-child(n) | 匹配父元素中的第n個子元素E |
| E:first-of-child | 指定類型E的第一個 |
| E:last-of-child | 指定類型E的最後一個 |
| E:nth-of-type | 指定類型E的第n個 |
nth-child(n)
* n可以是數字、關鍵字和公式
* n如果是數字，就是選擇第幾個
* 常見的關鍵詞有even偶數、odd奇數
* 常見的公式如下（如果n是公式，則從0開始計算）
* 第0個元素或者超出了元素的個數會被忽略
| 公式 | 取值 |
|---|---|
| 2n | 偶數（2*0,2*1,……） |
| 2n+1 | 奇數（2*0+1，2*1+1，……） |
| 5n | 5，10，15，…… |
| n+5 |
從第5個開始（包含第五個）到最後 |
| -n+5 | 前五個（包含第五個） |
4. 僞元素選擇器
| 選擇符 | 簡介 |
|---|---|
| ::before | 在元素內部的前面插入內容 |
| ::after | 在元素內部的後面插入內容 |
* before和after必須有content屬性
* before在內容的前面，after在內容的後面
* before和after創建一個元素，但是屬於行內元素
* 因爲在dom裏面看不見剛纔創建的元素，所以我們稱爲僞元素
* 僞元素和標籤選擇器一樣，權重爲1
5. 2D轉換
轉換（transform)是css3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、縮放等效果。
轉換可以簡單理解爲變形
* 移動 translate
* 旋轉 rotate
* 縮放 scale
5.1 二維座標系
左上角爲原點
水平向右爲 x軸
垂直向下爲 y軸
5.2 2D轉換之移動translate
2D移動是2D轉換裏面的一種功能，可以改變元素在頁面中的位置，類似定位
1.語法
transform:translate(X,y)
/* 或者分開寫 */
transform:translateX(n)
transform:translateY(n)
2.重點
* 定義2D轉換中的移動，沿着X軸和Y軸移動元素
* translate最大的有點：不會影響到其他元素的位置
* translate中的百分比單位是相對於自身元素的translate:(50%，50%)；
* 對行內標籤沒有效果
5.3 2D轉換之旋轉rotate
2D旋轉指的是讓元素在2維平面內順時針 旋轉或者逆時針旋轉
1. 語法
transform:rotate(度數)
2. 重點
* rotate 裏面跟度數，單位是deg，比如rotate(45deg)
* 角度爲正時，順時針，爲負時，逆時針
* 默認旋轉的中心點是元素的中心點
5.4 2D轉換的中心點
可以通過transform-origin 來設置元素轉換的中心點
transform-origin:x y;
* 後面的參數x和y用空格隔開
* x y 默認轉換的中心點是元素的中心點（50% 50%）
* 還可以給x y設置 像素 或者方位名詞 （top,bottom.left,right,center）
5.5 2D轉換之縮放scale
縮放，顧名思義，可以放大縮小，只要給元素添加上了這個屬性就能控制它放大還是縮小
1. 語法
transform:scale(x,y)
2. 注意
* 注意其中的x和y用逗號分隔
* transform:scale(1,1) 寬和高都放大一倍，相當於沒有放大
* transform:scale(2,2) 寬和高都放大了2倍
* transform:scale(2) 只寫一個參數，，第一個參數則和第一個參數一樣，相當於scale(2,2)
* transform:scale(0.5,0.5) 縮小
* scale 縮放最大的優勢：可以設置轉換中心點縮放，默認是以中心點縮放的，而且不影響其他盒子
5.6 2D轉換綜合寫法
* 同時使用多個轉化，格式爲：transfrom:translate() rotate() scale() ……等。
* 其順序會影響轉換的效果（先旋轉的化會改變座標軸方向）
* 當我們 同時有位移和其他屬性的時候，記得要將位移放到最前
6. 動畫
* 動畫（animation）是css3中具有顛覆性的特徵之一，可通過設置多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果，
* 相比較過渡，動畫可以實現更多變化，更多控制，連續自動播放等效果
6.1 動畫的基本使用
製作動畫分爲兩步：
1. 先定義動畫
2. 再使用（調用）動畫
1. 用keyframes定義動畫（類似定義類選擇器）
/* 定義動畫 */
@keyframes 動畫名稱{
0%{
width：100px；
}
10%{
}
20%{}
100%{
width：200px;
}
}
動畫序列
* 0%是動畫開始，100%是動畫的完成，這樣的規則就是動畫序列
* 在@keyframes中規定某項css樣式，就能創建由當前樣式逐漸改爲新樣式的動畫效果。
* 動畫是使元素從一種樣式逐漸變化爲另一種樣式的效果，您可以改變任意多的樣式任意多的次數
* 請用百分比來規定變化發生的事件，或用關鍵 詞 from 和 to ， 等同於0% 和 100%
2. 元素使用動畫
div{
width:200px;
height:200px;
background-color:aqua;
/* 調用動畫 */
animation-name:動畫名稱;
/* 動畫持續時間 */
animation-duration:持續時間;
}
6.2 動畫常用屬性
| 屬性 | 描述 |
|---|---|
| @keyframes | 規定動畫 |
| animation | 所有動畫屬性的簡寫屬性，除了animation-play-state屬性 |
| animation-name | 規定@keyframes動畫的名稱 |
| animation-duration | 規定動畫完成一個週期所花費的秒或毫秒，默認是0 |
| animation-timing-function |
規定動畫的速度曲線，默認是“ease” |
| animation-delay | 規定動畫何時開始，默認是0 |
| animation-iteration-count | 規定動畫被播放的次數，默認是1，還有infinite |
| animation-direction | 規定動畫是否在下一個週期逆向播放，默認是“normal".alternate逆播放 |
| animation-play-state | 規定動畫是否正在運行或暫停，默認是”running"。還有“paused" |
| animation-fill-mode | 規定動畫結束後狀態，保持forwards， 回到起始backwards |
6.3 動畫簡寫屬性
animation:動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始或則和結束的狀態;
animation:myfirst 5s linear 2s infinite alternate;
* 簡寫屬性裏面不包含animation-play-state
* 暫停動畫： animation-play-state:paused;經常和鼠標經過等其他配合使用
* 想要動畫走回來：而不是直接調回來，animation-direction:alternate
* 盒子動畫結束後，停在結束位置， animation-fill-mode：forwards
6.4 速度曲線細節
animation-timing-function:規定動畫的速度曲線，默認是"ease"
| 值 | 描述 |
|---|---|
| linear | 動畫從頭到尾的速度是相同的，勻速 |
| ease | 默認，低速開始，然後加快，結束前變慢 |
| ease-in | 以低速開始 |
| ease-out | 低速結束 |
| ease-in-out | 低速開始和結束 |
| steps() | 指定了時間函數中的間隔數量（步長），分幾步完成動畫，效果就是一步步往前跳 |
給同一個元素使用多個動畫時，用逗號做分隔
animation:name1 1s step(10) infinite, name2 2s linear infinite;
7. CSS3 3D轉換
* 生活的環境就是3D的，照片就是3D物體在2D平面呈現的例子
特點：
* 近大遠小
* 物體後面遮擋不可見
7.1 三維座標系
三維座標系其實就是立體空間，立體空間是由3個軸共同組成的
* x軸 水平向右 x右邊是正值，左邊是負值
* y軸 垂直向下 y下面是正值，上面是負值
* z軸 垂直屏幕 往外面是正值，往裏面是負值
7.2 3D移動translate3d
3D移動在2D移動的基礎上多加了一個可以移動的方向，就是z軸方向
/* x軸移動 */
transform:translateX(100px)
/* y軸移動 */
transform:translateY(100px)
/* z軸移動 */
transform:translateZ(100px)
/* 往x,y,z三個方向移動距離x，y，z */
transform:translate3d(x,y,z)
7.3 透視 perspective
在2D平面產生近大遠小的視覺立體，但是隻要效果二維的
* 如果想要在網頁產生3D效果需要透視（理解成3D物體投影在2D平面內）
* 模擬人類的視覺位置，可認爲安排一隻眼睛去看
* 透視我們也稱爲視距，視距就是人的眼睛到屏幕的距離
* 距離視覺點越近的在電腦平面成像越大，越遠成像越小
* 透視的單位是像素
透視寫在被觀察元素的父盒子上面
7.4 translateZ
transform:translateZ(100px) :僅僅是在Z軸上移動，
有了透視，就能看到translateZ引起的變化了
7.5 3D旋轉rotate3d
3D旋轉指可以讓元素在三維平面內沿着X軸，Y軸，Z軸或者自定義軸進行旋轉。
/* 沿着x軸正方向旋轉45度 */
transform:rotateX(45deg)
/* 沿着y軸正方向旋轉45度 */
transform:rotateY(45deg)
/* 沿着z軸正方向旋轉45度 */
transform:rotateZ(45deg)
/* 沿着自定義軸旋轉 deg爲角度 */
transform:rotate3d(x,y,z,45deg)
元素旋轉的方向， 遵循左手法則
* 左手的手拇指指向x軸的正方向
* 其餘手指的彎曲方向就是該元素沿着x軸旋轉的方向
transform:rotate3d(x,y,z,deg)
xyz是表示旋轉軸的矢量，是標示你是否希望沿着該軸旋轉，最後一個標示旋轉的角度
* transform:rotate(1,0,0,45deg) 沿着x軸旋轉45deg
* transfom:rotate3d(1,1,0,45deg) 沿着對角線旋轉45deg
7.6 3D呈現transform-style
* 控制子元素是否開啓三維立體環境
* transform-style:flat 子元素不開啓3d立體空間 默認的
* transform-style：preserve-3d 字元素開啓立體空間
* 代碼寫給父級， 但是影響的是子盒子
8. 瀏覽器私有前綴
瀏覽器私有前綴是爲了兼容老版本的寫法，比較新版本的瀏覽器無須添加。
8.1 私有前綴
* -moz-: 代表firefox瀏覽器私有屬性
* -ms-: 代表ie瀏覽器私有屬性
* -webkit-:代表safari、chrome私有屬性
* -o-：代表Opera私有屬性
8.2 提倡的寫法
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;