From cea7950c6403761e4182ab66d515105481a96bdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=96=B9=E5=AE=87=E8=88=AA?=
 <14093708+fang-----yuhang@user.noreply.gitee.com>
Date: Fri, 25 Oct 2024 23:13:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...57\274\2142D\357\274\2143D\357\274\211.md" | 197 ++++++++++++++++++
 1 file changed, 197 insertions(+)
 create mode 100644 "\346\226\271\345\256\207\350\210\252/20241025\347\254\224\350\256\260\357\274\210\344\274\252\347\261\273\357\274\2142D\357\274\2143D\357\274\211.md"

diff --git "a/\346\226\271\345\256\207\350\210\252/20241025\347\254\224\350\256\260\357\274\210\344\274\252\347\261\273\357\274\2142D\357\274\2143D\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20241025\347\254\224\350\256\260\357\274\210\344\274\252\347\261\273\357\274\2142D\357\274\2143D\357\274\211.md"
new file mode 100644
index 0000000..dd2398f
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20241025\347\254\224\350\256\260\357\274\210\344\274\252\347\261\273\357\274\2142D\357\274\2143D\357\274\211.md"
@@ -0,0 +1,197 @@
+### 结构伪类选择器
+
+伪类选择器的标志性符号是 `:`。
+
+CSS中有一些伪类选择器，比如`:link`、`:visited`、`:hover`、`:active`、`:focus`。
+
+**1、格式：（第一部分）**（重要）
+
+- `E:first-child` 匹配父元素的第一个子元素E。
+
+- `E:last-child` 匹配父元素的最后一个子元素E。
+
+- `E:nth-child(n)` 匹配父元素的第n个子元素E。**注意**，盒子的编号是从`1`开始算起，不是从`0`开始算起。
+
+- `E:nth-child(odd)` 匹配奇数
+
+- `E:nth-child(even)` 匹配偶数
+
+- `E:nth-last-child(n)` 匹配父元素的倒数第n个子元素E。
+
+理解：
+
+（1）好好理解**父元素**的含义，它指的是：以 E 元素的父元素为参考。
+
+（2）注意：以上选择器中所选到的元素的类型，必须是指定的类型E，如果选不中，则无效。这个要好好理解，具体可以看CSS参考手册中的`E:nth-child(n)`的示例。我们可以理解成：**先根据选择器找到选中的全部位置，如果发现某个位置不是类型E，则该位置失效**。
+
+**2、格式：（第二部分）**
+
+- `E:first-of-type` 匹配同类型中的第一个同级兄弟元素E。
+
+- `E:last-of-type` 匹配同类型中的最后一个同级兄弟元素E。
+
+- `E:nth-of-type(n)` 匹配同类型中的第n个同级兄弟元素E。
+
+- `E:nth-last-of-type(n)` 匹配同类型中的倒数第n个同级兄弟元素E。
+
+
+**3、格式：（第三部分）**
+
+- `E:empty` 匹配没有任何子节点（包括空格等text节点）的元素E。
+
+- `E:target` 匹配相关URL指向的E元素。要配合锚点使用。
+
+### 伪元素选择器
+
+伪元素选择器的标志性符号是 `::`。
+
+**1、格式：（第一部分）**
+
+- `E::before` 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+
+- `E::after` 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+
+`E:after`、`E:before `在旧版本里是伪类，在 CSS3 这个新版本里是伪元素。新版本里，`E:after`、`E:before`会被自动识别为`E::after`、`E::before`，按伪元素来对待，这样做的目的是用来做兼容处理。
+
+
+**2、格式：（第二部分）**
+
+- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。
+
+- `E::first-line` 设置元素 E 里面的**第一行**的样式。
+
+- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
+
+## 过渡：transition
+
+`transition`的中文含义是**过渡**。过渡是CSS3中具有颠覆性的一个特征，可以实现元素**不同状态间的平滑过渡**（补间动画），经常用来制作动画效果。
+
+- 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
+
+- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
+
+transition 包括以下属性：
+
+- `transition-property: all;`  如果希望所有的属性都发生过渡，就使用all。
+
+- `transition-duration: 1s;` 过渡的持续时间。
+
+- `transition-timing-function: linear;`  运动曲线。属性值可以是：
+	- `linear` 线性
+	- `ease`  减速
+	- `ease-in` 加速
+	- `ease-out` 减速
+	- `ease-in-out`  先加速后减速
+
+- `transition-delay: 1s;` 过渡延迟。多长时间后再执行这个过渡动画。
+
+上面的四个属性也可以写成**综合属性**：
+
+```javascript
+	transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+
+	transition: all 3s linear 0s;
+```
+## 2D 转换
+
+**转换**是 CSS3 中具有颠覆性的一个特征，可以实现元素的**位移、旋转、变形、缩放**，甚至支持矩阵方式。
+
+转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
+
+在 CSS3 当中，通过 `transform` 转换来实现 2D 转换或者 3D 转换。
+
+- 2D转换包括：缩放、移动、旋转。
+
+
+### 1、缩放：`scale`
+
+格式：
+
+```javascript
+	transform: scale(x, y);
+
+	transform: scale(2, 0.5);
+```
+
+参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
+
+取值：大于1表示放大，小于1表示缩小。不能为百分比。
+
+### 2、位移：translate
+
+格式：
+
+
+```javascript
+	transform: translate(水平位移, 垂直位移);
+
+	transform: translate(-50%, -50%);
+```
+
+参数解释：
+
+- 参数为百分比，相对于自身移动。
+
+- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+
+### 3、旋转：rotate
+
+格式：
+
+```javascript
+	transform: rotate(角度);
+
+	transform: rotate(45deg);
+```
+
+参数解释：正值 顺时针；负值：逆时针。
+
+## 3D 转换
+
+### 1、旋转：rotateX、rotateY、rotateZ
+
+
+**旋转的方向：（左手法则）**
+
+左手握住旋转轴，竖起拇指指向旋转轴的**正方向**，正向就是**其余手指卷曲的方向**。
+
+所有的3d旋转，对着正方向去看，都是顺时针旋转。
+
+**格式：**
+
+```javascript
+	transform: rotateX(360deg);    //绕 X 轴旋转360度
+
+	transform: rotateY(360deg);    //绕 Y 轴旋转360度
+
+	transform: rotateZ(360deg);    //绕 Z 轴旋转360度
+
+```
+
+### 2、移动：translateX、translateY、translateZ
+
+**格式：**
+
+```javascript
+	transform: translateX(100px);    //沿着 X 轴移动
+
+	transform: translateY(360px);    //沿着 Y 轴移动
+
+	transform: translateZ(360px);    //沿着 Z 轴移动
+
+```
+### 3、透视：perspective
+
+电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
+
+透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出 3d 效果，并不是正真的3d。
+
+格式有两种写法：
+
+- 作为一个属性，设置给父元素，作用于所有3D转换的子元素
+
+- 作为 transform 属性的一个值，做用于元素自身。
+
+### 4、3D呈现（transform-style）
+
+3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的**父元素**设置`transform-style: preserve-3d`来使其变成一个真正的3D图形。属性值可以如下：
\ No newline at end of file
-- 
Gitee