文章目录
- 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的元素”。
)
