CSS3-選擇器、2D轉換，動畫，3D轉換，瀏覽器私有前綴

主要內容：

• CSS3 屬性選擇器
• CSS3 結構僞類選擇器
• CSS3 僞元素選擇器
• CSS3 2D轉換
• CSS3 動畫
• CSS3 3D轉換
• 瀏覽器私有前綴

1、現狀

瀏覽器支持程度差，須要添加私有前綴

2、 CSS3 屬性選擇器

類選擇器、屬性選擇器、僞類選擇器，權重爲 10
代碼演示

button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}

input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

3、CSS3 結構僞類選擇器

一、屬性說明

代碼演示

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

二、nth-child參數說明

• 注意：本質上就是選中第幾個子元素
• n 能夠是數字、關鍵字、公式
• n 若是是數字，就是選中第幾個
• 常見的關鍵字有 even 偶數、odd 奇數
• 常見的公式以下(若是 n 是公式，則從 0 開始計算)
• 可是第 0 個元素或者超出了元素的個數會被忽略

代碼演示

<style>
  /* 偶數 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇數 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式，從 0 開始計算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶數 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇數 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 選擇第 0 5 10 15, 應該怎麼選 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是從第5個開始日後選擇 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五個 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

三、nth-child 和 nt-of-type 的區別

• nth-child 選擇父元素裏面的第幾個子元素，不論是第幾個類型
• nt-of-type 選擇指定類型的元素

代碼演示

<style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>

四、總結

• 結構僞類選擇器就是選擇第n個
• Nth-child從全部子級開始算的，可能不是同一種類型
• Nth-of-type 是指定同一種類型的子級，好比 ul li:nth-of-type(2) 是選擇第2個li
• 關於nth-child（n） 咱們要知道n從0開始計算的，要記住經常使用的公式
• 若是是無無序列表，咱們確定用 nth-child 更多
• 類選擇器、屬性選擇器、僞類選擇器，權重爲 10

4、僞元素選擇器

一、僞元素選擇器

• before 和 after 必須有 content 屬性
• before 在內容的前面，after 在內容的後面
• before 和 after 建立一個元素，可是屬於行內元素。
• 由於在 dom 裏面看不見剛纔建立的元素，因此咱們稱爲僞元素
• 僞元素和標籤選擇器同樣，權重爲 1

代碼演示

<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

二、CSS選擇器及權重複習

• 內聯樣式 1000
• ID選擇器 100
• 類選擇權，屬性選擇器 ，僞類選擇器 10
• 標籤選擇器，僞元素選擇器 1

三、清楚浮動的辦法

• 父元素添加 overfloat:hidden

  • 優勢：代碼簡潔
  • 缺點：內容增多的時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示要溢出的元素

• 使用::after僞元素清除浮動

  • 優勢：符合閉合浮動思想，結構語義化正確
  • 缺點：ie6-7不支持僞元素：after，使用zoom:1觸發hasLayout.

.box::after{
    content:"";
    display:block;
    clear:both;
    visibility:hidden;
}

<div class=box>
    <div class\="big"\>big</div\>
    <div class\="small"\>small</div\>
    <!--<div class="clear">額外標籤法</div>-->
</div>

• zoom:1 : ie6清除浮動的方式 號只有IE6-IE7執行，其餘瀏覽器不執行,通常與其餘組合使用

.box{
    *zoom:1;

}

• 使用before和after雙僞元素清除浮動

.box:after,.box:before{
        content: "";
        display: table;
    }
.box:after{
        clear: both;
    }
.box{
     *zoom: 1;
    }

5、CSS 2D轉換

轉換（transform）是CSS3中具備顛覆性的特徵之一，能夠實現元素的位移、旋轉、變形、縮放。

• 縮放：scale
• 移動：translate
• 旋轉：rotate
• 傾斜：skew

一、2D 移動 translate

2D移動是2D轉換裏面的一種功能，能夠改變元素在頁面中的位置，相似定位。

transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);

• 定義 2D 轉換，沿着 X 和 Y 軸移動元素
• translate中的百分比單位是相對於自身元素的 translate:(50%,50%);
• translate相似定位，不會影響到其餘元素的位置
• 對行內標籤沒有效果

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移動 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移動 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移動 100px */
  /* transform: translate(0, 100px) */

  /* 水平移動 100px */
  /* transform: translateX(100px); */

  /* 垂直移動 100px */
  transform: translateY(100px)
}

二、2D 轉換之旋轉 rotate

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

transform:rotate(angle)

• rotate 裏面跟度數，單位是 deg
• 角度爲正時，順時針，角度爲負時，逆時針
• 默認旋轉的中心點是元素的中心點
• 設置旋轉中心點:transform-origin: x y;//(left,right,top,bottom,center)

img:hover {
  transform: rotate(360deg)
}

三、2D 轉換之縮放scale

縮放，顧名思義，能夠放大和縮小。 只要給元素添加上了這個屬性就能控制它放大仍是縮小。

transform:scale(x,y);

• transform:scale(1,1) ：寬和高都放大一倍，相對於沒有放大
• transform:scale(2,2) ：寬和高都放大了2倍
• transform:scale(2) ：只寫一個參數，第二個參數則和第一個參數同樣，至關於 scale(2,2)
• transform:scale(0.5,0.5)：縮小

四、順序

• 同時使用多個轉換，其格式爲：transform: translate() rotate() scale() ...等，其順序會影轉換的效果。
• 先旋轉會改變座標軸方向
• 但咱們同時有位置或者其餘屬性的時候，要將位移放到最前面

6、CSS動畫

1. 什麼是動畫

*   動畫是 `CSS3` 中最具顛覆性的特徵之一，可經過設置多個節點來精確的控制一個或者一組動畫，從而實現複雜的動畫效果

2. 動畫的基本使用

*   先定義動畫
*   在調用定義好的動畫

3. 語法格式(定義動畫)

@keyframes 動畫名稱 {  
     0% {  
     width: 100px;  
     }  
     100% {  
     width: 200px  
     }  
    }

4.語法格式(使用動畫)

div {  
    /\* 調用動畫 \*/  
    animation-name: 動畫名稱;  
    /\* 持續時間 \*/  
    animation-duration: 持續時間；  
   }

5. 動畫序列

*   0% 是動畫的開始，100 % 是動畫的完成，這樣的規則就是動畫序列
*   在 @keyframs 中規定某項 CSS 樣式，就由建立當前樣式逐漸改成新樣式的動畫效果 
*   動畫是使元素從一個樣式逐漸變化爲另外一個樣式的效果，能夠改變任意多的樣式任意多的次數  
*   用百分比來規定變化發生的時間，或用 `from` 和 `to`，等同於 0% 和 100%

6. 代碼演示

<style\>  
     div {  
     width: 100px;  
     height: 100px;  
     background-color: aquamarine;  
     animation-name: move;  
     animation-duration: 0.5s;  
     }  
    ​  
     @keyframes move{  
     0% {  
     transform: translate(0px)  
     }  
     100% {  
     transform: translate(500px, 0)  
     }  
     }  
     </style\>

7. 常見的屬性

8. 代碼演示

div {  
     width: 100px;  
     height: 100px;  
     background-color: aquamarine;  
     /\* 動畫名稱 \*/  
     animation-name: move;  
     /\* 動畫花費時長 \*/  
     animation-duration: 2s;  
     /\* 動畫速度曲線 \*/  
     animation-timing-function: ease-in-out;  
     /\* 動畫等待多長時間執行 \*/  
     animation-delay: 2s;  
     /\* 規定動畫播放次數 infinite: 無限循環 \*/  
     animation-iteration-count: infinite;  
     /\* 是否逆行播放 \*/  
     animation-direction: alternate;  
     /\* 動畫結束以後的狀態 \*/  
     animation-fill-mode: forwards;  
    }  
    ​  
    div:hover {  
     /\* 規定動畫是否暫停或者播放 \*/  
     animation-play-state: paused;  
    }

9. 動畫簡寫方式

/\* animation: 動畫名稱 持續時間 運動曲線 什麼時候開始 播放次數 是否反方向 起始與結束狀態 \*/  
animation: name duration timing-function delay iteration-count direction fill-mode

10. 知識要點

• 簡寫屬性裏面不包含 animation-paly-state
• 暫停動畫 animation-paly-state: paused; 常常和鼠標通過等其餘配合使用
• 要想動畫走回來，而不是直接調回來：animation-direction: alternate
• 盒子動畫結束後，停在結束位置：animation-fill-mode: forwards

animation: move 2s linear 1s infinite alternate forwards;

11. 速度曲線細節

• animation-timing-function: 規定動畫的速度曲線，默認是ease

6、CSS 3D轉換

一、 3D 轉換特色

• 近大遠小
• 物體和麪遮擋不可見

2. 三維座標系

• x 軸：水平向右 -- 注意：x 軸右邊是正值，左邊是負值
• y 軸：垂直向下 -- 注意：y 軸下面是正值，上面是負值
• z 軸：垂直屏幕 -- **注意：往外邊的是正值，往裏面的是負值

三、3D 轉換

（1）3D 轉換知識要點

• 3D 位移：translate3d(x, y, z)
• 3D 旋轉：rotate3d(x, y, z)
• 透視：perspctive
• 3D呈現 transfrom-style

（2） 3D 移動 translate3d

• 3D 移動就是在 2D 移動的基礎上多加了一個能夠移動的方向，就是 z 軸方向
• transform: translateX(100px)：僅僅是在 x 軸上移動
• transform: translateY(100px)：僅僅是在 y 軸上移
• transform: translateZ(100px)：僅僅是在 z 軸上移動

• transform: translate3d(x, y, z)：其中x、y、z 分別指要移動的軸的方向的距離

  • 注意：x, y, z 對應的值不能省略，不須要填寫用 0 進行填充

（3）. 語法

transform: translate3d(x, y, z)

(4). 代碼演示

transform: translate3d(100px, 100px, 100px)  
    /\* 注意：x, y, z 對應的值不能省略，不須要填寫用 0 進行填充 \*/  
    transform: translate3d(100px, 100px, 0)

二、透視 perspective

(1)講解

• 若是想要網頁產生 3D 效果須要透視(理解成 3D 物體投影的 2D 平面上)
• 實際上模仿人類的視覺位置，可視爲安排一直眼睛去看
• 透視也稱爲視距，所謂的視距就是人的眼睛到屏幕的距離
• 距離視覺點越近的在電腦平面成像越大，越遠成像越小
• 透視的單位是像素

(2) 要點

• 透視須要寫在被視察元素的父盒子上面

• 注意下方圖片

  • d：就是視距，視距就是指人的眼睛到屏幕的距離
  • z：就是 z 軸，z 軸越大(正值)，咱們看到的物體就越大

(3) 代碼演示

body {  
     perspective: 1000px;  
    }

三、 translateZ

(1) translateZ 與 perspecitve 的區別

• perspecitve 給父級進行設置，translateZ 給 子元素進行設置不一樣的大小

四、3D 旋轉rotateX

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

（1） 語法

• transform: rotateX(45deg) -- 沿着 x 軸正方向旋轉 45 度
• transform: rotateY(45deg) -- 沿着 y 軸正方向旋轉 45 度
• transform: rotateZ(45deg) -- 沿着 z 軸正方向旋轉 45 度
• transform: rotate3d(x, y, z, 45deg) -- 沿着自定義軸旋轉 45 deg 爲角度

div {  
     perspective: 300px;  
    }  
    ​  
    img {  
     display: block;  
     margin: 100px auto;  
     transition: all 1s;  
    }  
    ​  
    img:hover {  
     transform: rotateX(\-45deg)  
    }

(2) 左手準則

• 左手的手拇指指向 x 軸的正方向
• 其他手指的彎曲方向就是該元素沿着 x 軸旋轉的方向

四、3D 旋轉 rotateY

div {  
     perspective: 500px;  
    }  
    ​  
    img {  
     display: block;  
     margin: 100px auto;  
     transition: all 1s;  
    }  
    ​  
    img:hover {  
     transform: rotateY(180deg)  
    }

• 左手準則

  • 左手的拇指指向 y 軸的正方向
  • 其他的手指彎曲方向就是該元素沿着 y 軸旋轉的方向(正值)

五、 3D 旋轉 rotateZ

div {  
     perspective: 500px;  
    }  
    ​  
    img {  
     display: block;  
     margin: 100px auto;  
     transition: all 1s;  
    }  
    ​  
    img:hover {  
     transform: rotateZ(180deg)  
    }

（1） rotate3d

• transform: rotate3d(x, y, z, deg) -- 沿着自定義軸旋轉 deg 爲角度

• x, y, z 表示旋轉軸的矢量，是標識你是否但願沿着該軸進行旋轉，最後一個標識旋轉的角度

  • transform: rotate3d(1, 1, 0, 180deg) -- 沿着對角線旋轉 45deg
  • transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 軸旋轉 45deg

div {  
     perspective: 500px;  
    }  
    ​  
    img {  
     display: block;  
     margin: 100px auto;  
     transition: all 1s;  
    }  
    ​  
    img:hover {  
     transform: rotate3d(1, 1, 0, 180deg)  
    }

六、3D 呈現 transform-style

• transform-style

  • 控制子元素是否開啓三維立體環境
  • transform-style: flat 表明子元素不開啓 3D 立體空間，默認的
  • transform-style: preserve-3d 子元素開啓立體空間
  • 代碼寫給父級，可是影響的是子盒子

七、瀏覽器私有前綴

瀏覽器私有前綴是爲了兼容老版本的寫法，比較新版本的瀏覽器無須添加。

• 私有前綴

  • -moz-：表明 firefox 瀏覽器私有屬性
  • -ms-：表明 ie 瀏覽器私有屬性
  • -webkit-：表明 safari、chrome 私有屬性
  • -o-：表明 Opera 私有屬性
• 提倡的寫法

\-moz-border-radius: 10px;
\-webkit-border-radius: 10px;
\-o-border-radius: 10px;
border-radius: 10px;