diff --git "a/\345\220\264\344\275\263\346\225\217/20241025\350\257\276\345\240\202\347\254\224\350\256\260--\350\277\207\345\272\246\345\212\250\347\224\273.md" "b/\345\220\264\344\275\263\346\225\217/20241025\350\257\276\345\240\202\347\254\224\350\256\260--\350\277\207\345\272\246\345\212\250\347\224\273.md"
index addc8d90951ba614be9a16087aeafb6a4c76ed85..55728bfd521ff8407e4e0b2dc28c563a0cd11475 100644
--- "a/\345\220\264\344\275\263\346\225\217/20241025\350\257\276\345\240\202\347\254\224\350\256\260--\350\277\207\345\272\246\345\212\250\347\224\273.md"
+++ "b/\345\220\264\344\275\263\346\225\217/20241025\350\257\276\345\240\202\347\254\224\350\256\260--\350\277\207\345\272\246\345\212\250\347\224\273.md"
@@ -61,4 +61,10 @@ transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画
 	transform: rotate(角度);
 
 	transform: rotate(45deg);
-参数解释：正值 顺时针；负值：逆时针。
\ No newline at end of file
+参数解释：正值 顺时针；负值：逆时针。
+# 作业
+![](./imgs/10-25/1.PNG)
+![](./imgs/10-25/1-1.PNG)
+![](./imgs/10-25/2.PNG)
+![](./imgs/10-25/4-1.PNG)
+![](./imgs/10-25/4.PNG)
diff --git "a/\345\220\264\344\275\263\346\225\217/20241028\350\257\276\345\240\202\347\254\224\350\256\260--\345\212\250\347\224\273\344\273\245\345\217\212flex\345\270\203\345\261\200.md" "b/\345\220\264\344\275\263\346\225\217/20241028\350\257\276\345\240\202\347\254\224\350\256\260--\345\212\250\347\224\273\344\273\245\345\217\212flex\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..49822f051deeedb45733c9220eed49c526c56801
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20241028\350\257\276\345\240\202\347\254\224\350\256\260--\345\212\250\347\224\273\344\273\245\345\217\212flex\345\270\203\345\261\200.md"
@@ -0,0 +1,169 @@
+# 动画
+
+###  1、定义动画的步骤
+
+（1）通过@keyframes定义动画；
+
+（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+
+（3）在指定元素里，通过 `animation` 属性调用动画。
+
+语法：
+
+```
+    定义动画：
+        @keyframes 动画名{
+            from{ 初始状态 }
+            to{ 结束状态 }
+        }
+
+     调用：
+      animation: 动画名称 持续时间；
+```
+
+```
+(infinite 表示无限次)
+```
+
+#### 1-1 定义一组或多组动画
+
+<!--定义一组动画-->
+
+```
+@keyframes move1 {
+            from {
+                transform: translateX(0px) rotate(0deg);
+            }
+            to {
+                transform: translateX(500px) rotate(555deg);
+            }
+        }
+```
+
+<!--定义多组动画-->
+
+```
+@keyframes move2 {
+            0% {
+                transform: translateX(0px) translateY(0px);
+                background-color: red;
+                border-radius: 0;
+            }
+
+            25% {
+                transform: translateX(500px) translateY(0px);
+
+            }
+
+            /*动画执行到 50% 的时候，背景色变成绿色，形状变成圆形*/
+            50% {
+                /* 虽然两个方向都有translate，但其实只是Y轴上移动了200px。
+                因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */
+                transform: translateX(500px) translateY(200px);
+                background-color: green;
+                border-radius: 50%;
+            }
+
+            75% {
+                transform: translateX(0px) translateY(200px);
+            }
+
+            /*动画执行到 100% 的时候，背景色还原为红色，形状还原为正方形*/
+            100% {
+                /*坐标归零，表示回到原点。*/
+                transform: translateX(0px) translateY(0px);
+                background-color: red;
+                border-radius: 0;
+            }
+        }
+```
+
+###  2、动画属性
+
+我们刚刚在调用动画时，animation属性的格式如下：
+
+animation属性的格式如下：
+
+```
+            animation: 定义的动画名称  持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
+
+            animation: move1 1s  alternate linear 3;
+
+            animation: move2 4s;
+```
+
+可以看出，这里的 animation 是综合属性，接下来，我们把这个综合属性拆分看看。
+
+（1）动画名称：
+
+```
+	animation-name: move;
+```
+
+（2）执行一次动画的持续时间：
+
+```
+	animation-duration: 4s;
+```
+
+备注：上面两个属性，是必选项，且顺序固定。
+
+（3）动画的执行次数：
+
+```
+	animation-iteration-count: 1;       //iteration的含义表示迭代
+```
+
+属性值`infinite`表示无数次。
+
+（3）动画的方向：
+
+```
+	animation-direction: alternate;
+```
+
+属性值：normal 正常，**alternate 反向。**
+
+（4）动画延迟执行：
+
+```
+	animation-delay: 1s;
+```
+
+（5）设置动画结束时，盒子的状态：
+
+```
+	animation-fill-mode: forwards;
+```
+
+属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。
+
+（6）运动曲线：
+
+```
+	animation-timing-function: ease-in;
+```
+
+属性值可以是：linear ease-in-out steps()等。
+
+注意，如果把属性值写成**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行。我们接下来专门讲一下属性值 `steps()`
+
+# flex布局
+
+###  概念：弹性盒子、子元素
+
+在讲 flex 的知识点之前，我们事先约定两个概念：
+
+- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
+- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）
+
+###  flex 布局的优势
+
+1、**flex 布局的子元素不会脱离文档流**，很好地遵从了“流的特性”。
+
+###  概念：主轴和侧轴
+
+- 主轴：flex容器的主轴，默认是水平方向，从左向右。
+- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
+
+PS：主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向，我们在后面会讲到。
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-25/1-1.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-25/1-1.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..4a10a62a2fcbf124d3a0253920dfbb7532f5c51d
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-25/1-1.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-25/1.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-25/1.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..aa885be1c8ee8c4a2b6da0cd76132c4aea7d24c8
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-25/1.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-25/2.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-25/2.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..c99c6fd1bd78beaabba120508fcba61a32fe64db
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-25/2.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-25/4-1.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-25/4-1.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..a664ea22bdff984fe1a4261290e7d8c4ec826460
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-25/4-1.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-25/4.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-25/4.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..a228e19ae9f98f2196fcf187afb7b17674ee2b96
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-25/4.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\345\225\206\346\240\207.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\345\225\206\346\240\207.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..4a20b038875c64cecbf0cdcfc9f15d7404e232a7
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\345\225\206\346\240\207.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\345\225\206\346\240\207.wmv" "b/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\345\225\206\346\240\207.wmv"
new file mode 100644
index 0000000000000000000000000000000000000000..36ecaf341f900f0be3f7a21087167e9a935d4bbd
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\345\225\206\346\240\207.wmv" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\345\244\247\351\261\274.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\345\244\247\351\261\274.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..d05771734d3a4684aa8be3d97f251252f757597d
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\345\244\247\351\261\274.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\345\244\247\351\261\274.wmv" "b/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\345\244\247\351\261\274.wmv"
new file mode 100644
index 0000000000000000000000000000000000000000..355b6f40db399492ce632a95f8af2e6c182a485d
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\345\244\247\351\261\274.wmv" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\347\254\250\347\206\212.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\347\254\250\347\206\212.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..c1c1285be641b1e79587422c0f93b6719ac4a98e
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\347\254\250\347\206\212.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\347\254\250\347\206\212.wmv" "b/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\347\254\250\347\206\212.wmv"
new file mode 100644
index 0000000000000000000000000000000000000000..77158079bb504ace8cd9dd760c5c664d550c942a
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-28--\345\212\250\347\224\273/\347\254\250\347\206\212.wmv" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/20170725_2138 (1).png.crdownload" "b/\345\220\264\344\275\263\346\225\217/imgs/20170725_2138 (1).png.crdownload"
deleted file mode 100644
index 1f7a6330d8892af0da52c911f31588aafb73529b..0000000000000000000000000000000000000000
Binary files "a/\345\220\264\344\275\263\346\225\217/imgs/20170725_2138 (1).png.crdownload" and /dev/null differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/20170725_2138.png.crdownload" "b/\345\220\264\344\275\263\346\225\217/imgs/20170725_2138.png.crdownload"
deleted file mode 100644
index 1f7a6330d8892af0da52c911f31588aafb73529b..0000000000000000000000000000000000000000
Binary files "a/\345\220\264\344\275\263\346\225\217/imgs/20170725_2138.png.crdownload" and /dev/null differ
diff --git "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/1.png" "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/1.png"
deleted file mode 100644
index 599dbe48c3fba3fe0549e88d5d79f6f863d9acc8..0000000000000000000000000000000000000000
Binary files "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/1.png" and /dev/null differ
diff --git "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/2.png" "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/2.png"
deleted file mode 100644
index e08ba74213094bf8a7cb7c6e84a9adc499518aae..0000000000000000000000000000000000000000
Binary files "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/2.png" and /dev/null differ
diff --git "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/20231017204046.png" "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/20231017204046.png"
deleted file mode 100644
index 03b86c8249d78b653db95fff220ebccaec7cee5f..0000000000000000000000000000000000000000
Binary files "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/20231017204046.png" and /dev/null differ
diff --git "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/20231017210305.png" "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/20231017210305.png"
deleted file mode 100644
index aa91346b17db7b1c0a0da3be60a79c1537250e8e..0000000000000000000000000000000000000000
Binary files "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/20231017210305.png" and /dev/null differ
diff --git "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/20231017210408.png" "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/20231017210408.png"
deleted file mode 100644
index b2364f5aa00b1865127c7d57d569496999752a23..0000000000000000000000000000000000000000
Binary files "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/20231017210408.png" and /dev/null differ
diff --git "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/2d\345\222\214\350\277\207\346\270\241.html" "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/2d\345\222\214\350\277\207\346\270\241.html"
deleted file mode 100644
index 09b3d0aa10d28a8a6262ffd73e88e221f92381f4..0000000000000000000000000000000000000000
--- "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/2d\345\222\214\350\277\207\346\270\241.html"
+++ /dev/null
@@ -1,202 +0,0 @@
-<!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>
-        /*第一题css代码
-         .box{
-            width:800px;
-            margin:auto;
-        }
-        .d1,.d2,.d3{
-            width: 230px;
-            height:300px;
-            margin-right: 20px;
-            float: left;
-            position: relative;
-            overflow: hidden;
-            transition: all 2s;
-        }
-        .d1 img,.d2 img,.d3 img{
-            margin-top: 30px;
-        } 
-        .d1:hover{
-            box-shadow: 5px 5px 15px grey;
-            top:-5px;
-        }
-        .d2:hover{
-            box-shadow: 5px 5px 15px grey;
-            top:-5px;
-        }
-        .d3:hover{
-            box-shadow: 5px 5px 15px grey;
-            top:-5px;
-        }
-        .d2-111{
-            background-color:#ff6700 ;
-            width:230px;
-            height:80px;
-            position: absolute;
-            bottom: -80px;
-            transition: all 2s;
-        }
-        .d2:hover .d2-111{
-            bottom: 0px;
-        }
-        .d3-111{
-            background-color:#ff6700 ;
-            width:230px;
-            height:80px;
-            position: absolute;
-            bottom: -80px;
-            transition: all 2s;
-        }
-        .d3:hover .d3-111{
-            bottom: 0px;
-        }
-        */
-        
-        /* 第二题css代码
-        .d1{
-            width:200px;
-            height:200px;
-            background-color: red;
-            margin: auto;
-            transition: all 2s
-        }
-        .d1:hover{
-            transform: rotate(-405deg)
-        } */
-          
-        /* 第三题css代码
-        .d1{
-            background-color: #E0890F;
-            width:100%;
-            height:1500px;
-            position: relative;
-        }
-        img{
-            width: 50px;
-            height:90px;
-            object-fit: cover;
-            position: absolute;
-            left:100px;
-            top:680px;
-            transform:rotate(45deg);
-            transition: all 2s;
-        }
-        body:hover img{
-            transform:translate(500px,-500px) rotate(45deg);
-        }
-      */
-
-      .box{
-            width: 300px;
-            height: 440px;
-            margin: 100px auto;
-            position: relative;
-      }
-      img {
-            width: 100%;
-            transition: all 1.5s;
-            position: absolute;     /* 既然扑克牌是叠在一起的，那就都用绝对定位 */
-            left: 0;
-            top: 0;
-
-            transform-origin: center bottom; /*旋转时，以盒子底部的中心为坐标原点*/
-            box-shadow: 0 0 3px 0 #666;
-        }
-        .box:hover img:nth-child(6) {
-            transform: rotate(-10deg);
-        }
-
-        .box:hover img:nth-child(5) {
-            transform: rotate(-20deg);
-        }
-
-        .box:hover img:nth-child(4) {
-            transform: rotate(-30deg);
-        }
-
-        .box:hover img:nth-child(3) {
-            transform: rotate(-40deg);
-        }
-
-        .box:hover img:nth-child(2) {
-            transform: rotate(-50deg);
-        }
-
-        .box:hover img:nth-child(1) {
-            transform: rotate(-60deg);
-        }
-
-        .box:hover img:nth-child(8) {
-            transform: rotate(10deg);
-        }
-
-        .box:hover img:nth-child(9) {
-            transform: rotate(20deg);
-        }
-
-        .box:hover img:nth-child(10) {
-            transform: rotate(30deg);
-        }
-
-        .box:hover img:nth-child(11) {
-            transform: rotate(40deg);
-        }
-
-        .box:hover img:nth-child(12) {
-            transform: rotate(50deg);
-        }
-
-        .box:hover img:nth-child(13) {
-            transform: rotate(60deg);
-        }
-    </style>
-</head>
-<body>
-    <!-- 第一题
-       <div class="box">
-        <div class="d1">
-            <img src="./1.png"/>
-        </div>
-        <div class="d2">
-            <img src="./2.png"/>
-            <div class="d2-111"></div>
-        </div>
-        <div class="d3">
-            <img src="./3.jpg">
-            <div class="d3-111"></div>
-        </div>
-       </div> -->
-    <!-- 第二题 -->
-       <!-- <div class="d1">
-          遥遥领先
-       </div> -->
-    <!-- 第三题 -->
-        <!-- <div class="d1">
-            <img src="./20231017204046.png"/>
-        </div> -->
-    <!-- 第四题 -->
-     <div class="box">
-        <img src="./20231017210305.png"/>
-        <img src="./20231017210408.png"/>
-        <img src="./20231017210305.png"/>
-        <img src="./20231017210408.png"/>
-        <img src="./20231017210305.png"/>
-        <img src="./20231017210408.png"/>
-        <img src="./20231017210305.png"/>
-        <img src="./20231017210408.png"/>
-        <img src="./20231017210305.png"/>
-        <img src="./20231017210408.png"/>
-        <img src="./20231017210305.png"/>
-        <img src="./20231017210408.png"/>
-        <img src="./20231017210305.png"/>
-     </div>
-
-
-</body>
-</html>
\ No newline at end of file
diff --git "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/3.jpg" "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/3.jpg"
deleted file mode 100644
index 1ba3b393e92797493150bb43edb2cb6d61177c9a..0000000000000000000000000000000000000000
Binary files "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/3.jpg" and /dev/null differ
diff --git "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/demo.html" "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/demo.html"
deleted file mode 100644
index e357da5372e0ec5dec92bf2a74c72927abc847e6..0000000000000000000000000000000000000000
--- "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/demo.html"
+++ /dev/null
@@ -1,28 +0,0 @@
-<!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{
-            width:500px;
-            height: 500px;
-            position: relative;
-            border: 2px solid black;
-        }
-        .d2{
-            position: absolute;
-            width:100px;
-            height:100px;
-            background-color:red ;
-            /* bottom:-80px; */
-        }
-    </style>
-</head>
-<body>
-    <div class="d1">
-        <div class="d2"></div>
-    </div>
-</body>
-</html>
\ No newline at end of file