CSS3 新特性

阿新 • • 發佈：2021-01-21

CSS3 新特性

一、CSS3 新增選擇器

1、屬性選擇器

屬性選擇器可以根據元素特定屬性來選擇元素，這樣就不用藉助類或者id選擇器

選擇符：

E[att]：選擇具有att屬性的E 元素

E[att='val']：選擇具有att屬性並且屬性值的等於value的E元素

E[att^='val']：匹配具有att屬性並且屬性值以val開頭的E元素

E[att$='val']：匹配具有att屬性並且屬性值以val結尾的E元素

E[att*='val']：匹配具有att屬性並且屬性值含有val的E元素

注意：類選擇器、屬性選擇器、偽類選擇器，權重為10

2、結構選擇器

結構偽類選擇器主要根據文件結構來選擇元素，常用於根據父級選擇器裡面的子元素

選擇符：

E:first-child：匹配父元素中的第一個子元素E

E:last-child：匹配父元素中的最後一個子元素E

E:nth-child(n)：匹配父元素中的第n個子元素E

E:first-of-type：指定型別E的第一個

E:first-of-last：指定型別E的最後一個

E:nth-of-type(n)：指定型別E的第n個

區別：

nth-child對父元素裡面的所有孩子排序選擇（序號是固定的）先找到第n個孩子，然後再看看是否和E匹配
nth-of-type對父元素裡面指定子元素進行排序選擇，先去匹配E，然後再根據E找第n個孩子

3、偽元素選擇器

偽元素選擇器可以幫助我們利用CSS建立新標籤，而不需要HTML標籤，從而簡化HTML結構

選擇符：

::before：在元素內部的前面插入內容

::after：在元素內部的後面插入內容

注意：

before 和after 建立一個元素，但是屬於行內元素
新建立的這個元素在文件樹中是找不到的，所以我們稱為偽元素
語法:element::before{}
before和after必須有content屬性
before在父元素內容的前面建立元素，after在父元素內容的後面插入元素
偽元素選擇器和標籤選擇器一樣，權重為1

二、CSS3盒子模型

CSS3中可以通過box-sizing來指定盒模型，有2個值：即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。

box-sizing:content-box 盒子大小為width+padding+border（預設）
box-sizing：border-box 盒子大小為width

如果盒子模型我們改為了 box-sizing: border-box,那padding和border就不會撐大盒子了（前提padding和border不會超過width寬度）

三、CSS3濾鏡filter

filter CSS屬性將模糊或顏色偏移等圖形效果應用於元素

語法：filter:函式(); eg:filter:blur(5px); blur模糊處理數值越大越模糊

四、CSS3 calc函式

calc()這個函式讓你在宣告CSS屬性值時執行一些計算

eg：width:calc(100%-80px);括號裡面可以使用+、-、* 、/來進行計算

五、CSS3過渡

過渡是CSS3中具有顛覆性的特徵之一，可以在不使用Flash動畫或JavaScript的情況下，元素從一種樣式轉變為另一種樣式時為元素新增效果。經常和:hover一起搭配使用

過渡動畫：是一種狀態漸漸的過渡到另外一個狀態。

語法:transition:要過渡的屬性花費時間運動曲線何時開始

屬性：想要變化的css屬性，寬度高度背景顏色都可以，如果想要所以屬性都變化過渡，寫一個all就可以

花費時間：單位是秒(必須寫單位) eg：1s

運動曲線：預設是ease(可以省略)

何時開始：單位是秒（必須寫單位）可以設定延遲觸發時間預設是0s（可以省略）

六、2D轉換

轉換(``transform` ) 是CSS3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、縮放等效果

移動：translate
旋轉：rotate
縮放：scale

1、2D轉換之移動 translate

2D移動是2D轉換裡面的一種功能，可以改變元素在頁面中位置，類似定位。

語法：

transform: translate(x,y);或者分開寫
transform: translateX(n);
transform: translateY(n);

注意：
- 定義2D轉換中的移動，沿著X和Y軸移動元素
- translate最大的優點：不會影響到其他元素的位置
- translate中的百分比單位是相對於自身元素的transla:(50%,50%);
- 對行內標籤沒有效果

2、2D轉換之旋轉 rotate

2D旋轉是指讓元素在2維平面內順時針旋轉或者逆時針旋轉。

語法：transform：rotate(度數)
注意：
- rotate裡面跟度數，單位是deg 比如rotate(45deg)
- 角度為正時，順時針，負時，為逆時針
- 預設旋轉的中心點是元素的中心點

3、2D 轉換中心點 transform-origin

設定元素轉換中心點

語法：transform-origin: x y ;
注意：
- 注意後面引數x和y用空格隔開
- x y 預設轉換的中心點是元素的中心點(50% 50%)
- 還可以給x y設定畫素或者方位名詞（top、bottom、left、right、center）

4、2D 轉換之縮放scale

控制元素的放大和縮小

語法：transform: scale(x,y)
注意：
- 其中的x和y用逗號分離
- transform: scale(1,1) 寬高都放大一倍，相對於沒有放大
- transform: scale(2,2) 寬高都放大2倍
- transform: scale(2) 只寫一個引數，第二個引數則和第一個引數一樣，相當於 scale(2,2)
- transform: scale(0.5,0.5) 縮小
- salce縮放最大的優勢:可以設定轉換中心點縮放，預設以中心點縮放的，而且不影響其他盒子

5、2D轉換綜合寫法

格式：transform：translate() rotate() scale()...等
其順序會影響轉換的效果。（先旋轉會改變座標軸方向）
當我們同時有位移和其他屬性的時候，記得要將位移放到最前

七、CSS3 3D轉換

動畫是CSS3中具有顛覆性的特徵之一，可以通過設定多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果。相比較過渡，動畫可以實現更多變化，更多控制，連續自動播放等效果。

1、動畫的基本使用

製作動畫分兩步：

先定義動畫
- 用keyframes定義動畫（類似定義類選擇器）
```
@keyframes 動畫名稱 {
                0% {
                    width: 100px;
                }
                100% {
                    width: 200px;
                }
            }
```
  動畫序列
  - 0%是動畫的開始，100%是動畫的完成，這樣的規則就是動畫序列
  - 在@keyframes中規定某項CSS樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果
  - 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果，您可以改變任意多的樣式任意多的次數
  - 請用百分比來規定變化發生的時間，或用關鍵詞“from”和“to”，等同於0%和100%

再使用（呼叫）動畫

  /* 呼叫動畫 */
            animation-name: 動畫名稱;
            /* 持續時間 */
            animation-duration: 持續時間;

2、動畫常見屬性

@keyframes：規定動畫
animation：所有動畫的簡寫屬性，除了animation-play-state屬性
animation-name：規定@keyframes動畫的名稱。（必須）
animation-duration：規定動畫完成一個週期所花費的秒或毫秒，預設是0（必須的）
animation-timing-function：規定動畫的速度曲線，預設是“ease”
- linear：動畫從頭到尾的速度是相同的勻速
- ease：預設，動畫以低速開始，然後加快，在結束前變慢
- ease-in：動畫以低速開始
- ease-out：動畫以低速結束
- ease-in-out：動畫以低速開始和結束
- step()：指定了時間函式中的間隔數量（步長）
animation-delay：規定動畫何時開始，預設是0
animation-iteration-count：規定動畫被播放的次數，預設是1，還有infinite無限迴圈播放
animation-direction：規定動畫是否在下個週期逆向播放，預設是“normal”，alternate逆播放
animation-play-state：規定動畫是否正在執行或暫停，預設是“running”，還有“pause”
animation-fill-mode：規定動畫結束後狀態，保持forward回到起始backwards

3、動畫簡寫屬性

animation：動畫名稱持續時間運動曲線何時開始播放次數是否反方向動畫起始或者結束的狀態

簡寫屬性裡面不包含animation-play-state
暫停動畫：animation-play-state: puased;經常和滑鼠經過等其他配合使用
想要動畫走回來，而不是直接跳回來：annimation-direction: alternate
盒子動畫結束後，停在結束位置：animation-fill-mode: forwords

4、透視 perspective

如果想要網頁產生3D效果需要透視（理解成3D物體投影到2D平面內）

透視的單位是畫素
透視寫到被觀察的元素的父盒子上
- d：視距，視距是一個距離人的眼鏡到螢幕的距離
- z：z軸，物體距離螢幕的距離，z軸越大我們看到的物體就越大

translform：translateZ(100px) ：僅在Z軸移動有了透視，就能看到translateZ引起的變化

5、3D旋轉 rotate3d

3D旋轉指可以讓元素在三維平面內沿著x軸，y軸，z軸或者自定義軸進行旋轉

語法：

 /* 沿著x軸正方向旋轉45度 */
 transform: rotateX(45deg);
 /* 沿著y軸正方向旋轉45度 */
 transform: rotateY(45deg);
 /* 沿著Z軸正方向旋轉45deg */
 transform: rotateZ(45deg);
 /* 沿著自定義軸旋轉deg為角度 */
 transform: rotate3d(x,y,z,deg);