WEB之CSS3系列筆記

CSS3屬性選擇器

屬性選擇器串列

• 例如:

  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;
  }
  

結構偽類選擇器

屬性串列

• 例如

  ul li:first-child {
    background-color: lightseagreen;
  }
  
  ul li:last-child {
    background-color: lightcoral;
  }
  
  ul li:nth-child(3) {
    background-color: aqua;
  }
  
  /************************************************/
  <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>
  

偽元素選擇器

• 偽類選擇器注意事項
  • before 和 after 必須有 content 屬性
  • before 在內容前面，after 在內容后面
  • before 和 after 創建的是一個元素，但是屬于行內元素
  • 創建出來的元素在 Dom 中查找不到，所以稱為偽元素
  • 偽元素和標簽選擇器一樣，權重為 1

2D轉換之translate

2D 轉換

• 2D 轉換是改變標簽在二維平面上的位置和形狀
• 移動： translate
• 旋轉： rotate
• 縮放： scale

translate 語法

• x 就是 x 軸上水平移動
• y 就是 y 軸上水平移動

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

• 重點知識點

  • 2D 的移動主要是指 水平、垂直方向上的移動
  • translate 最大的優點就是不影響其他元素的位置
  • translate 中的100%單位，是相對于本身的寬度和高度來進行計算的
  • 行內標簽沒有效果

• 例如:

  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

1. rotate 旋轉

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

2. rotate 語法

   /* 單位是：deg */
   transform: rotate(度數) 
   
   /**/
   div{
         transform: rotate(0deg);
   }
   

3. 重點知識點

   • rotate 里面跟度數，單位是 deg
   • 角度為正時，順時針，角度為負時，逆時針
   • 默認旋轉的中心點是元素的中心點

4. 代碼演示

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

設定元素旋轉中心點(transform-origin)

1. transform-origin 基礎語法

   transform-origin: x y;
   

2. 重要知識點

   • 注意后面的引數 x 和 y 用空格隔開
   • x y 默認旋轉的中心點是元素的中心 (50% 50%)，等價于 center center
   • 還可以給 x y 設定像素或者方位名詞(top、bottom、left、right、center)

2D 轉換之 scale

1. scale 的作用

   • 用來控制元素的放大與縮小

2. 語法

   transform: scale(x, y)
   

3. 知識要點

   • 注意，x 與 y 之間使用逗號進行分隔
   • transform: scale(1, 1): 寬高都放大一倍，相當于沒有放大
   • transform: scale(2, 2): 寬和高都放大了二倍
   • transform: scale(2): 如果只寫了一個引數，第二個引數就和第一個引數一致
   • transform:scale(0.5, 0.5): 縮小
   • scale 最大的優勢：可以設定轉換中心點縮放，默認以中心點縮放，而且不影響其他盒子

4. 代碼演示

div:hover {
    /* 注意，數字是倍數的含義，所以不需要加單位 */
    /* transform: scale(2, 2) */

    /* 實作等比縮放，同時修改寬與高 */
    /* transform: scale(2) */

    /* 小于 1 就等于縮放*/
    transform: scale(0.5, 0.5)
}

影片(animation)

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>
   

影片常見屬性

• 例如:

  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;
  }
  

  影片簡介方式

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

  知識要點

  • 簡寫屬性里面不包含 animation-paly-state
  • 暫停影片 animation-paly-state: paused; 經常和滑鼠經過等其他配合使用
  • 要想影片走回來，而不是直接調回來：animation-direction: alternate
  • 盒子影片結束后，停在結束位置：animation-fill-mode: forwards

速度曲線細節

animation-timing-function: 規定影片的速度曲線，默認是ease

• 例如

  div {
    width: 0px;
    height: 50px;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    background-color: aquamarine;
    animation: move 4s steps(24) forwards;
  }
  
  @keyframes move {
    0% {
      width: 0px;
    }
  
    100% {
      width: 480px;
    }
  }
  

3D 轉換

3D 轉換知識要點

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

``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 進行填充

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

透視 perspective

知識點講解

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

知識要點

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

  body {
    perspective: 1000px;
  }
  

translateZ

translateZ 與 perspecitve 的區別

• perspecitve 給父級進行設定，translateZ 給 子元素進行設定不同的大小

3D 旋轉rotateX

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

• 語法

  • 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)
  }
  
  /*
  - 左手的手拇指指向 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

1. 代碼演示

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

2. 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

3D 呈現 transform-style

1. transform-style

   • ☆☆☆☆☆

   • 控制子元素是否開啟三維立體環境

   • transform-style: flat 代表子元素不開啟 3D 立體空間，默認的

   • transform-style: preserve-3d 子元素開啟立體空間

   • 代碼寫給父級，但是影響的是子盒子

標籤：HTML5

上一篇：Javplayer 整合插件版下載使用

下一篇：撰寫python代碼實作打開并登錄網頁、對網頁進行點擊、輸入資訊等操作