文章目錄
- skew()
- transform
- cursor
- transition
- .arm .left {} 和 .arm.left {} 區別
skew()
skew 傾斜變換函數，該函數有兩個參數。第一個是剪切x軸的角度，第二個是剪切y軸的角度。
transform: skew(0deg, 44deg);
transform
.arm.left {top: 35%;left: 5%;transform-origin: top left; /* 基準點 */transform: rotate(130deg) scaleX(-1); /* 旋轉 */
}
position: absolute;
z-index: 1;
transform: rotate(45deg);
left: 110px;
top: 225px;
cursor
.penguin:active {transform: scale(1.5);cursor: not-allowed; /* 禁止操作 */
}
transition
.penguin {width: 300px;height: 300px;margin: auto;margin-top: 75px;z-index: 4;position: relative;transition-timing-function: ease-in-out;transition-duration: 1s;transition-delay: 0ms;
| 屬性 | 定義 | 主要用途 |
|---|---|---|
| ??transform | 定義元素的具體變換效果（旋轉、縮放、傾斜等） | 實現元素的變形 |
| ??transform-origin?? | 定義 transform變換的基準點位置 | 控制變換發生的中心點 |
| ??transition?? | 定義 CSS 屬性變化時的過渡效果 | 實現平滑的動畫過渡 |
| ??animation?? | 定義更復雜的動畫序列 | 控制關鍵幀動畫 |
.arm .left {} 和 .arm.left {} 區別
在 CSS 中，.arm .left和 .arm.left這兩個選擇器的含義和作用的范圍有本質區別。
| 特性 | .arm .left(帶空格) | .arm.left(無空格) |
|---|---|---|
| ??名稱?? | 后代選擇器 (Descendant Selector) | 多類選擇器/并列選擇器 (Multi-class Selector) |
| ??含義?? | 選擇??所有??在 class 為 arm的??元素內部??的 class 為 left的元素 | 選擇??同時擁有?? arm??和?? left這兩個 class 的??同一個元素?? |
| ??層級關系?? | 有層級關系（祖先與后代） | 無層級關系（作用于同一個元素） |
| ??HTML 結構示例?? | <div class=“arm”><div class=“left”></div></div> | <div class=“arm left”></div> |
💡 詳細說明與示例
-
.arm .left(后代選擇器)
這個選擇器中間有一個??空格??。空格在 CSS 選擇器中表示??層級關系??（祖先與后代）。它會匹配所有??作為 class="arm"的元素的后代元素??中，那些 class="left"的元素。 -
.arm.left(多類選擇器)
這個選擇器中間??沒有空格??。它用于選擇??同時具有?? arm和 left這兩個類的??同一個 HTML 元素??。類的順序在 HTML 的 class屬性中不重要，只要該元素同時擁有這兩個類即可。
💡 簡單記憶方法
??空格表示“在……里面”??：.arm .left表示“??在?? arm??里面??的 left元素”。
??無空格表示“和”??：.arm.left表示“既是 arm??又是?? left的元素”。
)
