From 3f405d9467fd5a5c3a7af462c6bff300caea65d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=9B=A6?= <2196258247@qq.com>
Date: Sun, 27 Oct 2024 21:19:35 +0800
Subject: [PATCH 1/3] =?UTF-8?q?20241021=E7=AC=AC=E5=8D=81=E5=85=AD?=
 =?UTF-8?q?=E6=AC=A1=E7=AC=94=E8=AE=B0+=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...32\344\275\215\345\261\236\346\200\247.md" | 267 ++++++++++++++++++
 1 file changed, 267 insertions(+)
 create mode 100644 "\345\210\230\346\233\246/20241021 -css\345\261\236\346\200\247\357\274\232\345\256\232\344\275\215\345\261\236\346\200\247.md"
diff --git "a/\345\210\230\346\233\246/20241021 -css\345\261\236\346\200\247\357\274\232\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\345\210\230\346\233\246/20241021 -css\345\261\236\346\200\247\357\274\232\345\256\232\344\275\215\345\261\236\346\200\247.md"
new file mode 100644
index 0000000..cedf4d1
--- /dev/null
+++ "b/\345\210\230\346\233\246/20241021 -css\345\261\236\346\200\247\357\274\232\345\256\232\344\275\215\345\261\236\346\200\247.md"	
@@ -0,0 +1,267 @@
+## CSS定位属性
+
+在CSS中，定位属性（`position`）是用来指定元素在页面中的定位方式。这个属性决定了元素如何在文档流中摆放，以及如何与其他元素相互作用。
+
+`position`属性有五个可能的值：`static`、`relative`、`fixed`、`absolute`和`sticky`。
+
+每个值都有其特定的行为方式，影响元素的布局和显示。
+
+### 代码示例
+
+**以下是一些基本的CSS定位属性的使用示例：**
+
+```cs
+/* 静态定位 */
+static {
+position: static;
+}
+
+/* 相对定位 */
+relative {
+position: relative;
+top: 10px;
+left: 20px;
+}
+
+/* 固定定位 */
+fixed {
+position: fixed;
+bottom: 0;
+right: 0;
+}
+
+/* 绝对定位 */
+absolute {
+position: absolute;
+top: 50px;
+right: 100px;
+}
+
+/* 粘性定位 */
+sticky {
+position: sticky;
+top: 0;
+}
+```
+
+### 定位详解
+
+- 静态定位（`static`）：这是元素的默认定位方式，元素出现在正常的文档流中，不会被`top`、`bottom`、`left`、`right`属性影响。
+
+- 相对定位（`relative`）：元素相对于其原本位置进行定位。即使元素被移动，它原本占据的空间仍然保留。
+
+- 固定定位（`fixed`）：元素相对于浏览器窗口进行定位，即使页面滚动，元素也会停留在屏幕的同一位置。
+
+- 绝对定位（`absolute`）：元素相对于最近的非静态（`non-static`）定位祖先元素进行定位。如果没有这样的祖先元素，它将相对于初始包含块进行定位。
+
+- 粘性定位（`sticky`）：元素根据用户的滚动位置在`relative`和`fixed`定位之间切换。它依赖于用户的滚动，当元素到达指定的偏移位置时，它会像`fixed`定位一样固定在那个位置。
+
+### 重要注意事项
+
+1. 层叠上下文（`Stacking Context`）：使用`fixed`或`sticky`定位的元素会创建新的层叠上下文。这意味着它们可以在z轴上高于或低于其他元素。
+
+2. `z-index`：`z-index`属性用于控制重叠元素的堆叠顺序。具有更高`z-index`值的元素会覆盖具有较低值的元素。
+
+3. 兼容性：不是所有的浏览器都支持所有定位类型，特别是`sticky`定位在某些旧版浏览器中可能不受支持。
+
+## 作业
+### 1
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body{
+            margin: 0px;
+        }
+        .d1{
+            width: 200px;
+            height: 200px;
+            border: 1px solid black;
+            position: relative;
+            left: 50px;
+            top: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">8888</div>
+</body>
+</html>
+```
+
+### 2
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+        }
+        .d1{
+            height: 50px;
+            width: 100%;
+            background-color: pink;
+            position: fixed;
+            top: 0px;
+        }
+        .d2{
+            height: 1400px;
+            margin-top: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">8888</div>
+    <div class="d2">
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+    </div>
+</body>
+</html>
+```
+
+### 3
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        	body{
+		padding:100px;
+	}
+	span{
+		position:relative;
+		display:inline-block;
+	}
+	span:hover{
+		cursor:pointer;
+	}
+	span:hover:before{
+		content:attr(data-tooltip);
+		background:pink;
+		color:#fff;
+		padding:.8em 1em;
+		position:absolute;
+		left:100%;
+		top:-70%;
+		margin-left:14px;
+		white-spack:pre;
+	}
+	span:hover:after{
+		content:" ";
+		position:absolute;
+		right:80%;
+		width:0;
+		height:0;
+		border-left:8px solid pink;
+		border-top:8px solid transpatrnt;
+		border-bottom:8px solid transparent;
+	}
+	
+
+    </style>
+</head>
+<body>
+    <div>
+
+        <span data-tooltip="喵喵喵">卢诗语</span>
+    
+    </div>
+    
+</body>
+</html>
+```
+
+### 4
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        div{
+            margin: 5px;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        .d0{
+            width: 200px;
+            margin: 50px auto;
+        }
+        span{
+            background: url(./20231010113053.png);
+            float: left;
+            width: 20px;
+            height: 20px;
+            background-size: 60px 40px;
+        }
+
+
+        .d1 {
+            background-position: 0 0;
+        }
+  
+        .d2 {
+            background-position: -20px 0;
+        }
+  
+        .d3 {
+            background-position: 0 -20px;
+        }
+  
+        .d4 {
+            background-position: -20px -20px;
+        }
+  
+        .d5 {
+            background-position: -40px 0;
+        }
+  
+        .d6 {
+            background-position: -40px -20px;
+        }
+ </style>
+    </style>
+</head>
+<body>
+    <div class="d0">
+    <div ><span class="d1"></span>付款图标</div>
+    <div ><span class="d2"></span>存款图标</div>
+    <div ><span class="d3"></span>删除图标</div>
+    <div ><span class="d4"></span>粘贴图标</div>
+    <div ><span class="d5"></span>笑脸图标</div>
+    <div ><span class="d6"></span>编辑图标</div>
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
-- 
Gitee


From ebf144343a31aba77d2f7ca4f6fa58bb7c062ba2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=9B=A6?= <2196258247@qq.com>
Date: Sun, 27 Oct 2024 21:22:46 +0800
Subject: [PATCH 2/3] =?UTF-8?q?20241023=E7=AC=AC=E5=8D=81=E4=B8=83?=
 =?UTF-8?q?=E6=AC=A1=E7=AC=94=E8=AE=B0+=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...51\345\231\250\350\257\246\350\247\243.md" | 464 ++++++++++++++++++
 1 file changed, 464 insertions(+)
 create mode 100644 "\345\210\230\346\233\246/20241023 -css3\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md"

diff --git "a/\345\210\230\346\233\246/20241023 -css3\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md" "b/\345\210\230\346\233\246/20241023 -css3\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md"
new file mode 100644
index 0000000..2e31a35
--- /dev/null
+++ "b/\345\210\230\346\233\246/20241023 -css3\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md"	
@@ -0,0 +1,464 @@
+## css介绍
+CSS3在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。
+
+## css选择器
+CSS3选择器分为5大类：基本选择器、组合选择器、伪类选择器、伪元素和属性选择器。
+
+其中，伪类选择器又分为6种：动态伪类选择器、目标伪类选择器、语言伪类选择器、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器。
+
+### 属性选择器
+
+属性选择器的标志性符号是 []。
+
+匹配含义：
+
+^：开头  $：结尾  *：包含
+
+格式:
+
+- `E[title]` 选中页面的E元素，并且E存在 title 属性即可。
+
+- `E[title="abc"]`选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。
+
+- `E[attr~=val]` 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
+
+- `E[attr|=val]` 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
+
+- `E[title^="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
+
+- `E[title$="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
+
+- `E[title*="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。
+
+### 结构伪类选择器
+
+伪类选择器的标志性符号是 :
+
+CSS中有一些伪类选择器，比如:`link`、`:visited`、`:hover`、`:active`、`:focus`。
+
+CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的结构伪类选择器：即通过结构来进行筛选。
+
+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，则该位置失效。
+
+（3）另外，`E:nth-child(n)`这个属性也很有意思。比如，针对下面这样一组标签：
+```html
+    <ul>
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+        <li>8</li>
+        <li>9</li>
+        <li>10</li>
+    </ul>
+```
+
+上方代码中：
+
+- 如果选择器写成`li:nth-child(2)`，则表示第2个 li。
+
+- 如果选择器写成`li:nth-child(n)`，则表示所有的li。因为此时的 n 表示 0,1,2,3,4,5,6,7,8.....（当n小于1时无效，因为n = 0 也是不会选中的）
+
+- 如果选择器写成`li:nth-child(2n)`，则表示所有的第偶数个 li。
+
+- 如果选择器写成`li:nth-child(2n+1)`，则表示所有的第奇数个 li。
+
+- 如果选择器写成`li:nth-child(-n+5)`，则表示前5个 li。
+
+- 如果选择器写成`li:nth-last-child(-n+5)`，则表示最后5个 li。
+
+- 如果选择器写成`li:nth-child(7n)`，则表示选中7的倍数。。
+
+上面列举的选择器中，我们只要记住： n 表示 0,1,2,3,4,5,6,7,8.....就很容易明白了。
+
+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。
+
+既然上面这几个选择器带有type，我们可以这样理解：先在同级里找到所有的E类型，然后根据 n 进行匹配。
+
+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，按伪元素来对待，这样做的目的是用来做兼容处理。
+
+通过伪元素选择器，就可以添加出类似于span标签的效果（记得要结合 content 属性使用）。
+
+通过这两个属性添加的伪元素，是行内元素，需要转换成块元素才能设置宽高。
+
+2. 格式：
+
+- `E::first-letter` 设置元素 E 里面的第一个字符的样式。
+
+- `E::first-line` 设置元素 E 里面的第一行的样式。
+
+- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
+
+### 标签选择器
+
+标签选择器直接引用HTML标签名称，也称为类型选择器，类型选择器规定了网页元素在页面中默认的显示样式。因此，标签选择器可以快速、方便地控制页面标签的默认显示效果。
+
+```cs
+<style type="text/css">
+p{
+  font-size:12px; /*字体大小为12像素*/
+  color:red; /*字体颜色为红色*/
+}
+</style>
+```
+
+### 类选择器
+
+类选择器能够为网页对象定义不同的样式，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同的样式，类选择器以一个(.)前缀开头，然后跟随一个自定义的类名。
+
+应用样式可以使用class属性来实现，HTML所有元素都支持该属性，只要在标签中定义class属性，然后把该属性值设置为事先定义好的类选择器的名称即可。
+
+```html
+<!DOCTYPE HTML>
+<head>
+    <meta charset="utf-8"></head>
+    <title>类选择示例</title>
+    <style type="text/css">
+        p{
+            font-size:12px; /*字体大小为12像素*/
+            color:red;      /*字体颜色为红色*/
+        }
+        .font18px{
+            font-size:18px;
+            color:blue;
+        }
+    </style>
+</head>
+<body>
+    <p>问君能有几多愁，恰似一江春水向东流.</p>
+    <p  class="font18px">剪不断，理还乱，是离愁。别是一般滋味在心头</p>
+    <p>独自莫凭栏，无限江山，到时容易见识难。流水落花春去也，天上人间</p>
+</body>
+```
+
+例图:
+
+![alt text](image10-23.png)
+
+### ID选择器
+
+ID选择器以#号作为前缀，然后是一个自定义的ID名。应用ID选择器可以使用id属性来实现，HTML所有元素都支持该属性，只要在标签中定义id属性，然后把该属性值设置为事先定义好的ID选择器的名称即可。
+
+**一般通过ID选择器来定义HTML框架结构的布局效果，因为HTML框架元素色ID值都是唯一的。**
+
+### 通配选择器
+
+如果HTML所有元素都需要定义相同的样式，这时不妨使用通配选择器。通配选择器是固定的，用型号(*)来表示。
+
+```cs
+*{
+  margin:0;
+  padding:0;
+}
+```
+
+## 组合选择器
+
+当把两个或多个基本选择器组合在一起，就形成了一个复杂的选择器，通过组合选择器可以精确匹配页面元素。CSS提供多种组合多个基本选择器的方式。
+
+### 包含选择器
+
+包含选择器通过空格标识符来表示，前面的一个选择器表示包含框对象的选择器，而后面的额选择器表示被包含的选择器。
+
+![alt text](923329-20180805012706159-445104039.png)
+
+```html
+<style type="text/css">
+    #header p{font-size:14px;}
+    #main p{font-size:12px;}
+</style>
+<body>
+    <div id="wrap">
+        <div id="header">
+        <p>主体区域第1段文本</p>
+        <p>主体区域第2段文本</p>
+        <p>主体区域第3段文本</p>
+    </div>
+    <div id="main">
+        <p>主体区域第1段文本</p>
+        <p>主体区域第2段文本</p>
+        <p>主体区域第3段文本</p>
+    </div>
+</body>
+```
+## 作业
+### 1
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body{
+            margin: 0px;
+        }
+        .d1{
+            width: 200px;
+            height: 200px;
+            border: 1px solid black;
+            position: relative;
+            left: 50px;
+            top: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">8888</div>
+</body>
+</html>
+```
+
+### 2
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+        }
+        .d1{
+            height: 50px;
+            width: 100%;
+            background-color: pink;
+            position: fixed;
+            top: 0px;
+        }
+        .d2{
+            height: 1400px;
+            margin-top: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">8888</div>
+    <div class="d2">
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+        333333333333333333333333333333333
+    </div>
+</body>
+</html>
+```
+
+### 3
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        	body{
+		padding:100px;
+	}
+	span{
+		position:relative;
+		display:inline-block;
+	}
+	span:hover{
+		cursor:pointer;
+	}
+	span:hover:before{
+		content:attr(data-tooltip);
+		background:pink;
+		color:#fff;
+		padding:.8em 1em;
+		position:absolute;
+		left:100%;
+		top:-70%;
+		margin-left:14px;
+		white-spack:pre;
+	}
+	span:hover:after{
+		content:" ";
+		position:absolute;
+		right:80%;
+		width:0;
+		height:0;
+		border-left:8px solid pink;
+		border-top:8px solid transpatrnt;
+		border-bottom:8px solid transparent;
+	}
+	
+
+    </style>
+</head>
+<body>
+    <div>
+
+        <span data-tooltip="喵喵喵">卢诗语</span>
+    
+    </div>
+    
+</body>
+</html>
+```
+
+### 4
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        div{
+            margin: 5px;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        .d0{
+            width: 200px;
+            margin: 50px auto;
+        }
+        span{
+            background: url(./20231010113053.png);
+            float: left;
+            width: 20px;
+            height: 20px;
+            background-size: 60px 40px;
+        }
+
+
+        .d1 {
+            background-position: 0 0;
+        }
+  
+        .d2 {
+            background-position: -20px 0;
+        }
+  
+        .d3 {
+            background-position: 0 -20px;
+        }
+  
+        .d4 {
+            background-position: -20px -20px;
+        }
+  
+        .d5 {
+            background-position: -40px 0;
+        }
+  
+        .d6 {
+            background-position: -40px -20px;
+        }
+ </style>
+    </style>
+</head>
+<body>
+    <div class="d0">
+    <div ><span class="d1"></span>付款图标</div>
+    <div ><span class="d2"></span>存款图标</div>
+    <div ><span class="d3"></span>删除图标</div>
+    <div ><span class="d4"></span>粘贴图标</div>
+    <div ><span class="d5"></span>笑脸图标</div>
+    <div ><span class="d6"></span>编辑图标</div>
+    </div>
+</body>
+</html>
+```
+### 6
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .d1{
+            height: 600px;
+            border: 1px solid black;
+            width: 900px;
+            margin-top: 200px;
+        }
+        .d2{
+            width: 100px;
+            height: 100px;
+            background-color: hotpink;
+            border: 1px solid black;
+            position: absolute;
+            bottom: 502px;
+            left: 200px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">
+        <div class="d2"></div>
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
-- 
Gitee


From b094f0f14c56f3f936a5d821fd53c95ae4f2727e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=9B=A6?= <2196258247@qq.com>
Date: Sun, 27 Oct 2024 21:24:51 +0800
Subject: [PATCH 3/3] =?UTF-8?q?20241024=E7=AC=AC=E5=8D=81=E5=85=AB?=
 =?UTF-8?q?=E6=AC=A1=E7=AC=94=E8=AE=B0+=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...50\347\224\273\350\257\246\350\247\243.md" | 523 ++++++++++++++++++
 1 file changed, 523 insertions(+)
 create mode 100644 "\345\210\230\346\233\246/20241024 -css3\345\261\236\346\200\247\350\257\246\350\247\243\357\274\232\345\212\250\347\224\273\350\257\246\350\247\243.md"

diff --git "a/\345\210\230\346\233\246/20241024 -css3\345\261\236\346\200\247\350\257\246\350\247\243\357\274\232\345\212\250\347\224\273\350\257\246\350\247\243.md" "b/\345\210\230\346\233\246/20241024 -css3\345\261\236\346\200\247\350\257\246\350\247\243\357\274\232\345\212\250\347\224\273\350\257\246\350\247\243.md"
new file mode 100644
index 0000000..a19c52c
--- /dev/null
+++ "b/\345\210\230\346\233\246/20241024 -css3\345\261\236\346\200\247\350\257\246\350\247\243\357\274\232\345\212\250\347\224\273\350\257\246\350\247\243.md"	
@@ -0,0 +1,523 @@
+## css3动画详解
+
+- 过渡：`transition`
+
+- 2D 转换 `transform`
+
+- 3D 转换 `transform`
+
+- 动画：`animation`
+
+## 过渡：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;` 过渡延迟。多长时间后再执行这个过渡动画。
+
+上面的四个属性也可以写成综合属性：
+
+```cs
+	transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+
+	transition: all 3s linear 0s;
+```
+
+## 2D 转换
+
+转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的**位移**、**旋转**、**变形**、**缩放**，甚至支持矩阵方式。
+
+转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
+
+在 CSS3 当中，通过 `transform` 转换来实现 2D 转换或者 3D 转换。
+
+    - 2D转换包括：缩放、移动、旋转。
+
+### 缩放：scale
+
+格式：
+
+```cs
+	transform: scale(x, y);
+
+	transform: scale(2, 0.5);
+```
+
+参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
+
+取值：大于1表示放大，小于1表示缩小。不能为百分比。
+
+格式举例：
+
+```html
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        .box {
+            width: 1000px;
+            margin: 100px auto;
+        }
+
+        .box div {
+            width: 300px;
+            height: 150px;
+            background-color: pink;
+            float: left;
+            margin-right: 15px;
+            color: white;
+            text-align: center;
+            font: 400 30px/150px “宋体”;
+
+        }
+
+        .box .box2 {
+            background-color: green;
+            transition: all 1s;
+        }
+
+        .box .box2:hover {
+            /*width: 500px;*/
+            /*height: 400px;*/
+            background-color: yellowgreen;
+
+            /* transform:  css3中用于做变换的属性
+                scale(x,y)：缩放 */
+            transform: scale(2, 0.5);
+        }
+
+    </style>
+</head>
+<body>
+<div class="box">
+    <div class="box1">1</div>
+    <div class="box2">2</div>
+    <div class="box3">3</div>
+</div>
+
+</body>
+</html>
+```
+
+### 位移：translate
+
+格式：
+
+```cs
+	transform: translate(水平位移, 垂直位移);
+
+	transform: translate(-50%, -50%);
+```
+
+参数解释：
+
+    - 参数为百分比，相对于自身移动。
+
+    - 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+
+格式举例：
+```html
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        .box {
+            width: 1000px;
+            margin: 100px auto;
+        }
+
+        .box > div {
+            width: 300px;
+            height: 150px;
+            border: 1px solid #000;
+            background-color: red;
+            float: left;
+            margin-right: 30px;
+        }
+
+        div:nth-child(2) {
+            background-color: pink;
+            transition: all 1s;
+        }
+
+        /* translate:(水平位移，垂直位移)*/
+        div:nth-child(2):hover {
+            transform: translate(-50%, -50%);
+        }
+    </style>
+
+</head>
+<body>
+<div class="box">
+    <div class="box1">1</div>
+    <div class="box2">2</div>
+    <div class="box3">3</div>
+</div>
+
+</body>
+</html>
+```
+
+如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。
+
+### 旋转：rotate
+
+格式：
+
+```cs
+	transform: rotate(角度);
+
+	transform: rotate(45deg);
+```
+
+参数解释：正值 顺时针；负值：逆时针。
+
+举例：
+
+```html
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        .box {
+            width: 200px;
+            height: 200px;
+            background-color: red;
+            margin: 50px auto;
+            color: #fff;
+            font-size: 50px;
+            transition: all 2s; /* 过渡：让盒子在进行 transform 转换的时候，有个过渡期 */
+        }
+
+        /* rotate（角度）旋转 */
+        .box:hover {
+            transform: rotate(-405deg); /* 鼠标悬停时，让盒子进行旋转 */
+        }
+
+    </style>
+</head>
+<body>
+<div class="box">1</div>
+
+</div>
+</body>
+</html>
+```
+
+### 3D 转换
+
+#### 旋转的方向：（左手法则）
+
+左手握住旋转轴，竖起拇指指向旋转轴的正方向，正向就是其余手指卷曲的方向。
+
+从上面这句话，我们也能看出：所有的3d旋转，对着正方向去看，都是顺时针旋转。
+
+格式：
+
+```cs
+	transform: rotateX(360deg);    //绕 X 轴旋转360度
+
+	transform: rotateY(360deg);    //绕 Y 轴旋转360度
+
+	transform: rotateZ(360deg);    //绕 Z 轴旋转360度
+```
+
+#### 移动：translateX、translateY、translateZ
+
+```cs
+	transform: translateX(100px);    //沿着 X 轴移动
+
+	transform: translateY(360px);    //沿着 Y 轴移动
+
+	transform: translateZ(360px);    //沿着 Z 轴移动
+```
+
+#### 透视：perspective
+
+电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
+
+透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真的3d。
+
+格式有两种写法：
+
+    - 作为一个属性，设置给父元素，作用于所有3D转换的子元素
+
+    - 作为 transform 属性的一个值，做用于元素自身。
+
+#### 3D呈现（transform-style）
+
+3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：
+
+```cs
+	transform-style: preserve-3d;     //让 子盒子 位于三维空间里
+
+	transform-style: flat;            //让子盒子位于此元素所在的平面内（子盒子被扁平化）
+```
+
+## 动画
+
+### 定义动画的步骤
+
+- 通过@keyframes定义动画；
+
+- 将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+
+- 在指定元素里，通过 animation 属性调用动画。
+
+之前,我们在 js 中定义一个函数的时候，是先定义，再调用：
+
+```cs
+    js 定义函数：
+        function fun(){ 函数体 }
+
+     调用：
+     	fun();
+```
+
+同样，我们在 CSS3 中定义动画的时候，也是先定义，再调用：
+
+```cs
+    定义动画：
+        @keyframes 动画名{
+            from{ 初始状态 }
+            to{ 结束状态 }
+        }
+
+     调用：
+      animation: 动画名称 持续时间；
+```
+
+其中，animation属性的格式如下：
+
+```cs
+            animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
+
+            animation: move1 1s  alternate linear 3;
+
+            animation: move2 4s;
+```
+
+### 动画属性
+
+animation属性的格式如下：
+
+```cs
+            animation: 定义的动画名称  持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
+
+            animation: move1 1s  alternate linear 3;
+
+            animation: move2 4s;
+```
+
+可以看出，这里的 animation 是综合属性，接下来，我们把这个综合属性拆分看看。
+
+1. 动画名称：
+```cs
+	animation-name: move;
+```
+
+2. 执行一次动画的持续时间：
+```cs
+	animation-duration: 4s;
+```
+
+备注：上面两个属性，是必选项，且顺序固定。
+
+4. 动画的执行次数：
+```cs
+	animation-iteration-count: 1;       //iteration的含义表示迭代
+```
+
+属性值infinite表示无数次。
+
+5. 动画的方向：
+```cs
+	animation-direction: alternate;
+```
+
+属性值：normal 正常，alternate 反向。
+
+6. 动画延迟执行：
+```cs
+	animation-delay: 1s;
+```
+
+7. 设置动画结束时，盒子的状态：
+```cs
+	animation-fill-mode: forwards;
+```
+
+属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。
+
+8. 运动曲线：
+```cs
+	animation-timing-function: ease-in;
+```
+
+属性值可以是：linear ease-in-out steps()等。
+
+注意，如果把属性值写成steps()，则表示动画不是连续执行，而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。
+
+**steps()的效果**
+
+```cs
+	animation: move2 4s steps(2);
+```
+
+## 作业
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body{
+            padding: 0px;
+            margin: 0px;
+            background-color: #ddd;
+        }
+        .d1{
+            width: 800px;
+            height: 400px;
+            padding-left: 20px;
+            margin: 80px auto;
+        }
+        .d2{
+            top: 0;
+            width: 230px;
+            height: 300px;
+            margin-right: 20px;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+            background-color: #fff;
+            float: left;
+            transition: all .5s;
+        }
+        .d2 img{
+            margin-top: 30px;
+        }
+        .d3{
+            width: 230px;
+            height: 300px;
+            background-color: #fff;
+            float: left;
+            margin-right: 20px;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+            transition: all .5s;
+        }
+        .d3 img{
+            margin-top: 30px;
+            margin-left: 5px;
+        }
+        .d4{
+            width: 230px;
+            height: 300px;
+            background-color: #fff;
+            float: left;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+            transition: all .5s;
+        }
+        .d4 img{
+            margin-top: 35px;
+        }
+        .d2 .s1{
+            position: absolute;
+            left: 0;
+            bottom: -80px;
+            width: 100%;
+            height: 80px;
+            background-color: #ff6700;
+            transition: all .5s;
+        }
+        .d3 .s1{
+            position: absolute;
+            left: 0;
+            bottom: -80px;
+            width: 100%;
+            height: 80px;
+            background-color: #ff6700;
+            transition: all .5s;
+        }
+        .d4 .s1{
+            position: absolute;
+            left: 0;
+            bottom: -80px;
+            width: 100%;
+            height: 80px;
+            background-color: #ff6700;
+            transition: all .5s;
+        }
+        .d2:hover .s1 {
+            bottom: 0;
+        }
+        .d2:hover {
+            top: -5px;
+            box-shadow: 0 0 15px #AAA;
+        }
+        .d3:hover .s1 {
+            bottom: 0;
+        }
+        .d3:hover {
+            top: -5px;
+            box-shadow: 0 0 15px #AAA;
+        }
+        .d4:hover .s1 {
+            bottom: 0;
+        }
+        .d4:hover {
+            top: -5px;
+            box-shadow: 0 0 15px #AAA;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="d1">
+        <div class="d2">
+            <img src="./1-10-24.png" alt="">
+            <span class="s1"></span>
+        </div>
+        <div class="d3">
+            <img src="./2-10-24.png" alt="">
+            <span class="s1"></span>
+        </div>
+        <div class="d4">
+            <img src="./3-10-24.jpg" alt="">
+            <span class="s1"></span>
+        </div>
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
-- 
Gitee

