CSS3

新屬性

邊框圓角

border-radius: px| %：設定邊框圓角

設定為50%可以實現邊框為圓，但標籤寬高比例必須是1:1。

顏色透明度

在CSS2中，可通過顏色單詞、十六進位制數、RGB三種方式設定顏色。CSS3可採用RGBA設定顏色，與RGB相比增加了alpha引數，0為完全透明、1為完全不透明。

需要注意的是，RGBA調節透明度與opacity調節透明度相比，opacity是整個標籤及子標籤都會受透明度影響，而RGBA只會影響顏色本身，標籤內容不受影響。

字型圖示

本質上是一個字型，該字型的所有字元都是小圖示。使用時先引入第三方的圖示字型，引入HTML頁面中，再通過<i class="圖示對應class">

常用第三方字型庫：fontawesome。

背景固定

background-attachment:fixed| scroll：設定背景圖片是否固定在頁面上

邊框陰影

box-shadow：設定盒子的邊框陰影，有五個引數：x軸的偏移量、y軸的偏移量、陰影模糊程度、陰影的寬度、陰影的顏色，也可以給邊框陰影加inset表示陰影變為內部陰影。邊框陰影支援同時指定多個，每個陰影之間程式碼是以逗號分割。

文字陰影

text-shadow：設定文字的陰影，有五個引數：x軸的偏移量、y軸的偏移量、陰影模糊程度、陰影的寬度、陰影的顏色，支援多個文字陰影，程式碼以逗號分割。

倒影

-webkit-box-reflect: below| above：Chrome專屬的屬性。

線性漸變

background-image:linear-gradient(漸變方向, 顏色1, 顏色2);：線性漸變(linear-gradient)，在CSS中是作為背景圖片的一個特殊的顏色來使用的。

• 漸變方向

  • 上下左右
    • to bottom ：自上而下(預設)
    • to top：自下而上
    • to left：自右到左
    • to right：自左到右
  • 對角線
    • to top left ：從右下到左上
    • to top right： 從左下到右上
    • to bottom left：從右上到左下
    • to bottom right：從左上到右下
  • 指定角度
    • linear-gradient(30deg, red, blue)
    • 0deg是從下往上，以順時針為正，逆時針為負。

• 色標(顏色漸變範圍)

  background-image:linear-gradient(漸變方向，顏色1 百分比, 顏色2 百分比, 顏色n 百分比)：從0%漸變開始，通過百分比設定來決定每個顏色的漸變範圍，漸變到100%就結束。

• 重複漸變

  background-image:repeating-linear-gradient(red 0%, blue 30%)：在漸變範圍內，會重複的進行相同的漸變。

徑向漸變

background-image:radial-gradient(顏色1, 顏色2)：以一個橢圓或圓為中心四周擴散的漸變。

• circle：改變形狀，預設為橢圓。

• 改變圓心點

  • at top left ：圓心點在左上角
  • at bottom right：圓心在右下角
  • at center right：圓心在右邊界中間
  • at top right：圓心在右上角
  • at bottom left：圓心在左下角
  • at center left：圓心在左邊界中間
  • at center top ：圓心在上邊界中間
  • at center bottom：圓心在下邊界中間
  • 畫素(百分比)：background-image:radial-gradient(at 50px 50px , red, blue);是相對盒子尺寸而言的。

• 色標(顏色漸變範圍)

  background-image:radial-gradient(大小 at 中心點, 顏色1 百分比, 顏色2 百分比, 顏色3 百分比, 顏色n 百分比);：類似於線性漸變，從0%漸變開始，通過百分比設定來決定每個顏色的漸變範圍，漸變到100%就結束。

• 形狀大小

  • background-image:radial-gradient(50px, 顏色1, 顏色2);：漸變的大小為50px
  • background-image:radial-gradient(150px 200px, 顏色1, 顏色2);：漸變的寬度為150px，高度為200px

• 細節調整

  • closest-side：最近的邊，漸變的大小調整為漸變邊緣能夠接觸最近的邊。
  • farthest-side：最遠的邊，漸變的大小調整為漸變邊緣能夠接觸最遠的邊。
  • closest-corner：最近的角，漸變的大小調整為漸變邊緣能夠接觸最近的角。
  • farthest-corner：最遠的角，漸變的大小調整為漸變邊緣能夠接觸最遠的角。

背景剪下(文字背景)

對背景圖片進行剪下，設定背景圖片在指定區域中顯示。

• background-clip: border-box;：邊框區域，背景只會在盒子區域看到(預設)。
• background-clip: padding-box;：內邊距區域，背景只會在內邊距區域看到。
• background-clip: content-box;：內容區域，背景只會在內容區域看到。
• -webkit-background-clip: text;：文字區域，Chrome提供的新的區域，背景只會體現在文字裡，需要注意的是，文字本身有顏色，所以需要先把文字顏色設成透明色( color: 透明色;)才有效果。

CSS3選擇器

兄弟選擇器

• +：定位緊挨著的下一個兄弟標籤

  /* 例子：對p標籤設定樣式。p標籤的上一個兄弟標籤必須是div */
  div + p{
      color:red;
  }
  

• ~：定位符合條件的所有的後續兄弟標籤

  /* 例子：找到div後續的所有p兄弟標籤 */
  div ~ p {
      color:red;
  }
  

後代選擇器

• div p：找到div的所有後代p標籤，兒子孫子曾孫······往下找到底。

• div > p：找到div的所有直接子p標籤，即只找兒子。

  /* 找到div裡所有的直接子p標籤 */
  div >p{
  	color:red;
  }
  

屬性選擇器

• div[id=demo]：找到所有的id為demo的div標籤。
• div[id]：找到所有有id屬性的div標籤。
• div[id*=abc]：找到所有id屬性值裡有abc的div標籤，只要id屬性包含了abc即可。
• div[id~=abc]：找到所有id屬性值裡有abc的div標籤，abc必須是單獨的一個單詞，跟其他單詞之間有空格。

結構選擇器

• :first-child：選擇作為其父標籤第一個子標籤的標籤，而非指該標籤本身的第一個子標籤。

  /* 例子：找到td並設定樣式，條件：td是某個標籤的第一個子標籤 */
  p:last-child{
      color:red;
  }
  

• :last-child：選擇作為其父標籤最後一個子標籤的標籤，而非指該標籤本身的最後一個子標籤。

  /* 例子：找到p標籤並設定樣式，條件：p是某個標籤的最後一個子標籤 */
  p:last-child{
      color:red;
  }
  

• :nth-child(n)：選擇作為其父標籤第n個子標籤的標籤，而非指該標籤本身的第n個子標籤。

  /* 例子：找到p標籤並設定樣式，條件：p是某個標籤的第3個子標籤 */
  p:nth-child(3){
      color:red;
  }
  /* 例子：找到p標籤並設定樣式，條件：p是某個標籤的奇數子標籤 */
  p:nth-child(2n-1){
      color:red;
  }
  /* 例子：找到p標籤並設定樣式，條件：p是某個標籤的偶數子標籤 */
  p:nth-child(2n){
      color:red;
  }
  

• :nth-last-child（n）：選擇作為其父標籤倒數第n個子標籤的標籤，而非指該標籤本身的倒數第n個子標籤。

  /* 例子：找到p標籤並設定樣式，條件：p是某個標籤的倒數第3個子標籤 */
  p:nth-last-child(3){
      color:red;
  }
  

• :nth-of-type(n)：選擇作為其父標籤第n個同類型的子標籤的標籤，而非指該標籤本身的第n個同類型的子標籤。

  /* 例子：找到符合條件的p標籤，條件是：p標籤是作為其父標籤的第三個p子標籤 */
  p:nth-of-type(3){
      color:red;
  }
  

• :nth-last-of-type(n)：選擇作為其父標籤倒數第n個同類型的子標籤的標籤，而非指該標籤本身的倒數第n個同類型的子標籤。

• :not()：選擇不符合條件的標籤

  /* 除了p標籤之外的所有標籤字型顏色是紅色 */
  :not(p){
      color:red;
  }
  

CSS3動畫

過渡

transition：能夠讓樣式的變化變得平滑過渡

transition: property transition-duration transition-timing-function transition-delay;
/*例子：*/
transition: width  2s linear 2s;

• property：需要過渡變化的css屬性(必需)，all表示針對所有變化的css屬性。
• transition-duration：過渡的持續時間(必需)。
• transition-timing-function：速度曲線，控制過渡的速度。
  • ease：先慢後快 (預設)
  • linear：勻速
  • ease-in：以低速開始
  • ease-out：以低速結束
  • ease-in-out：以低速開始和結束
• transition-delay：過渡的延遲時間，即幾秒後開始過渡。

2D動畫

Animation語法

CSS通過animation屬性來實現動畫。本身Animation是一個組合屬性

animation: 動畫名稱 動畫的持續時間 動畫的延時時間 動畫的速度 動畫的播放次數  是否來回播放  動畫的狀態;

• animation-name：動畫名稱，指定一個關鍵幀為動畫名稱(必需)。
• animation-duration：動畫持續時間(必需)。
• animation-delay：動畫延遲時間
• animation-timing-function：設定速度曲線
  • ease：先慢後快 (預設)
  • linear：勻速
  • ease-in：以低速開始
  • ease-out：以低速結束
  • ease-in-out：以低速開始和結束
• animation-iteration-count：動畫的播放次數。infinite：無限次數。
• animation-direction：控制動畫的播放方向，是否允許反向播放，預設不允許。alternate：允許來回播放。
• animation-fill-mode：是否保留動畫的結束狀態。預設不保持。forwards：保持。
• animation-play-state：控制動畫的執行狀態。paused：暫停。

Animation使用流程

1. 利用@keyframes定義動畫的關鍵幀，並設定動畫名稱。

   @keyframes 動畫名稱{
       from| 0%{
           動畫初始的樣式
       }
       to|100%{
           動畫結束之後的樣式
       }
   }
   

2. 對標籤使用animation來執行動畫。

   div{
       animation: 動畫名稱 動畫持續時間;
   }
   

多段動畫整合

設定多個百分比狀態，實現多段動畫。

2D轉換

transform：可實現標籤的旋轉、位移等特性。

位移

translate：控制標籤的移動，margin或top主要是用於頁面佈局，實現移動動畫應使用此屬性，不會影響佈局，效能也會更好。

transform:translate(x軸的移動量，y軸的移動量);
transform:translate(x軸的移動量);
transform:translateX(x軸的移動量);
transform:translateY(Y軸的移動量);

旋轉

rotate：實現標籤的旋轉，正角度為順時針，負角度為逆時針。

transform:rotate(角度);
transform:rotateX(角度);
transform:rotateY(角度);

• 標籤的預設旋轉中心是盒子的中心點。
• 如果先旋轉再位移，會導致旋轉中心點的改變。所以一般是先位移，再旋轉。

縮放

scale：對標籤按比例縮放

transform:scale(寬度比例, 高度比例);
transform:scale(尺寸比例); /*只有一個引數則寬高同比例*/

傾斜

skew：對盒子進行傾斜操作，但尺寸會進行拉伸，變成一個平行四邊形。

transform:skew(x軸角度, y軸角度);
transform:skew(x軸角度); /*單獨指定x軸傾斜*/
transform:skewX(x軸角度); /*單獨指定x軸傾斜*/
transform:skewY(y軸角度); /*單獨指定y軸傾斜*/

轉換基點

transform-origin：改變某個標籤的轉換基點

transform-origin: x軸的偏移量 y軸的偏移量

• 偏移量指的是相對於標籤的左上角(即原點)的距離
• 偏移量可以是具體的畫素、百分比或者center、left、right。

3D動畫

三維座標系

在二維座標系的基礎之上多了一個z軸，構成立體的座標系。三維座標系沒有嚴格的標準，一般可以採用左手或右手系統來表示。

景深

景深(depth of field)：從攝影角度來講，指的相機拍攝畫面中清晰成像的區域。根據景深的深度不同，分為淺景深以及深景深，光圈越大，景深越淺。淺景深的圖片只有區域性一部分是清晰，其他區域都是模糊的，模糊的區域越少，景深越深。

從螢幕角度將，景深指的是頁面內容和螢幕之間的距離。通過景深，能夠在頁面內容和螢幕之間構建一塊空間，稱為3D空間。

perspective:  px 

預設景深為0 ，即螢幕和頁面之間沒有距離，可以理解為一個2D平面。對於3D效果來說，景深越淺，越明顯。

3D子元素

transform-style ：決定了某個標籤裡面的子元素是以2D模式還是3D模式進行展示，預設是2D。

transform-style:flat| preserve-3d 

預設2D情況下，該標籤裡面的子標籤所有的轉換會以2D的形式進行展示，並且子標籤的活動空間全在父標籤所在平面上。

3D觀察模式

perspective-origin：設定觀察者模式，可以從不同的角度去觀察盒子

perspective-origin:x y;

• x和y表示x軸和y軸的偏移量，確定了觀察者的位置，具體值可以是top、left、bottom、right、%、px等
• 預設是正中間:perspective-origin:center center ;

3D一般流程

1. 給父標籤設定景深
2. 設定子標籤為3D子元素
3. 給子標籤設定3D轉換

3D轉換

同樣是transform，只是增添了Z軸。

3D位移

translateZ：Z軸移動量。z軸向外為正，設定足夠px，可能會導致標籤緊挨螢幕(放大)，反之縮小。

translate3D(x, y, z)：3軸同時設定。

3D旋轉

rotateZ：Z軸的角度。

rotate3d(x, y, z, 旋轉的角度)：3軸同時設定。對於x、y、z，0為不旋轉，1為需要旋轉。

3D縮放

跟2D旋轉一模一樣。

3D轉換基點

transform-origin添加了對z軸的支援，可以實現標籤沿某一點進行3D旋轉。

transform-origin:x y z;