diff --git "a/\346\235\216\345\250\234/20241028-\345\212\250\347\224\273\345\222\214flex\345\270\203\345\261\200\347\254\224\350\256\260.md" "b/\346\235\216\345\250\234/20241028-\345\212\250\347\224\273\345\222\214flex\345\270\203\345\261\200\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..893cfb0e2ea5fdb5bfb065b0df86db70ede5f95c
--- /dev/null
+++ "b/\346\235\216\345\250\234/20241028-\345\212\250\347\224\273\345\222\214flex\345\270\203\345\261\200\347\254\224\350\256\260.md"
@@ -0,0 +1,273 @@
+# 动画
+CSS3 动画是前端开发中常用的技术，它允许开发者在网页上创建平滑的动画效果，而无需使用JavaScript或Flash。以下是关于CSS3动画的一些基础知识梳理：
+
+## 1. 基本概念
+
+- **CSS3动画**：使用CSS3中的`@keyframes`规则来创建动画。
+- **关键帧（Keyframes）**：定义动画中特定时间点的样式。
+- **动画（Animation）**：包括动画的名称、持续时间、时间函数、延迟、迭代次数和方向等属性。
+
+## 2. 动画属性
+
+CSS3定义了一系列的动画属性，可以通过这些属性来控制动画的行为：
+
+- `animation-name`：定义动画名称。
+- `animation-duration`：定义动画持续时间。
+- `animation-timing-function`：定义动画的速度曲线，如`linear`、`ease`、`ease-in`、`ease-out`、`ease-in-out`等。
+- `animation-delay`：定义动画开始前的延迟时间。
+- `animation-iteration-count`：定义动画播放的次数，可以是具体数字或`infinite`。
+- `animation-direction`：定义动画播放的方向，如`normal`、`reverse`、`alternate`、`alternate-reverse`。
+- `animation-fill-mode`：定义动画在开始前和结束后的样式状态。
+- `animation-play-state`：控制动画的播放状态，如`running`或`paused`。
+
+### 3. @keyframes规则
+
+`@keyframes`规则用于定义动画的中间步骤，可以指定在动画的不同阶段元素应该呈现的样子。可以使用`from`和`to`，也可以使用百分比将动画分为好几个阶段。
+
+```css
+@keyframes example {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+```
+
+## 4. 使用动画
+
+将动画应用到元素上，需要将`animation-name`属性设置为`@keyframes`中定义的动画名称。
+
+```css
+.animated-element {
+  animation-name: example;
+  animation-duration: 3s;
+  animation-timing-function: ease-in-out;
+  animation-delay: 1s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+```
+# flex布局
+`Flex`布局是CSS3中一种新的布局模式，它提供了一种更加高效的方式来布局、对齐和分配容器内项目的空间，即使它们的大小是未知的或动态变化的。
+
+## 1. Flex容器和项目
+
+- **Flex容器（Flex Container）**：一个使用`display: flex;`或`display: inline-flex;`声明的容器。
+- **Flex项目（Flex Item）**：容器内的直接子元素，它们将按照Flex布局的规则进行排列。
+
+## 2. Flex容器的属性
+
+- `flex-direction`：定义主轴的方向（行或列）。
+  - `row`（默认）：主轴为水平方向，起点在左端。
+  - `row-reverse`：主轴为水平方向，起点在右端。
+  - `column`：主轴为垂直方向，起点在上沿。
+  - `column-reverse`：主轴为垂直方向，起点在下沿。
+- `flex-wrap`：定义项目是否在需要时可以换行。
+  - `nowrap`（默认）：不换行。
+  - `wrap`：换行，第一行在上方。
+  - `wrap-reverse`：换行，第一行在下方。
+# 作业一
+1. 主要效果
+
+![](./imgs/歌.gif)
+
+2. 主要代码
+```css
+   /* 给四个盒子设置样式 */
+    .d1,.d2,.d3,.d4 {
+        width: 280px;
+        height: 370px;
+        margin: 6px;
+        color: white;
+        position: relative;
+        overflow: hidden;
+        padding: 6px;
+        background-repeat: no-repeat;
+        float: left;
+    }
+    /* 分别加入背景图片 */
+    .d1 {
+        background-image: url(./hover1.jpg);
+    }
+    .d2 {
+        background-image: url(./hover2.jpg);
+    }
+    .d3 {
+        background-image: url(./hover3.jpg);
+    }
+    .d4 {
+        background-image: url(./hover4.jpg);
+    }
+    /* 内容 */
+    .text {
+        width: 270px;
+        height: 135px;
+        position: absolute;
+        top: 200px;
+        margin: 6px;
+    }
+    /* 鼠标悬停时的背景颜色 */
+    .color {
+        width: 280px;
+        height: 370px;
+        margin: -6px;
+    }
+    .color:hover {
+        animation: mv1 4s;
+    }
+    @keyframes mv1 {
+        from {
+            background-color: transparent;
+        }
+        to {
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+    }
+    .color:hover h3 {
+        animation: mv2 2s;
+    }
+    @keyframes mv2 {
+        from {
+            transform: translate(0px, -300px);
+        }
+        to {
+            transform: translate(0px, 0px);
+        }
+    }
+    .color:hover .p1 {
+        animation: mv3 2s;
+    }
+    @keyframes mv3 {
+        from {
+            transform: translate(-100px, 0px);
+        }
+        to {
+            transform: translate(0px, 0px);
+        }
+    }
+    .color:hover .p2 {
+        animation: mv4 2s;
+    }
+    @keyframes mv4 {
+        from {
+            transform: translate(0px, 300px);
+        }
+        to {
+            transform: translate(0px, 0px);
+        }
+    }
+```
+# 作业二
+1. 主要效果
+
+![](./imgs/鱼游.gif)
+
+2. 主要代码
+
+```css
+ body{
+            background-color: aqua;
+            position: relative;
+            overflow: hidden;
+        }
+        .d1{
+            background-image: url(./fish.png);
+            background-repeat: no-repeat;
+            position: absolute;
+            width: 174px;
+            height: 126px;
+            animation: mv1 3s steps(12) infinite ,mv11 20s linear infinite;
+        }
+        /* 动画一 */
+        @keyframes mv1{
+            form{
+                background-position: 0px 0px;
+            }
+            to{
+                background-position: 0px -1512px;
+            }
+        }
+        /* 动画二 */
+        @keyframes mv11 {
+          40%{
+            transform: rotate(45deg) translate(700px,0px);
+          }
+          60%{
+            transform:translate(700px,0px) rotate(-90deg);
+          }
+          80%{
+            transform: rotate(-180deg) translate(0px,0px);
+          }
+        }
+        .d2{
+            background-image: url(./shark2.png);
+            background-repeat: no-repeat;
+            position: absolute;
+            width: 509px;
+            height: 270px;
+            animation: mv2 3s steps(12) infinite,mv22 20s linear infinite;
+        }
+        /* 动画一 */
+        @keyframes mv2{
+            from{
+                background-position: 0px 0px;
+            }
+            to{
+                background-position: 0px -3240px;
+            }
+        }
+        /* 动画二 */
+        @keyframes mv22{
+            40%{
+                transform: translate(500px,0px);
+            }
+            60%{
+                transform: translate(500px,0px) rotate(180deg);
+            }
+            80%{
+                transform: translate(0px,0px) rotate(180deg);
+            }
+        }
+```
+# 作业三
+1. 效果如下
+
+![](./imgs/熊跑.gif)
+
+2. 主要代码
+
+```css
+ *{
+            margin: 0;
+            padding: 0;
+        }
+        .d1{
+            width: 100%;
+            height: 100px;
+            background-color: #057d05;
+            position: relative;
+        }
+        .d2{
+            background-image: url(./白熊.png);
+            background-repeat: no-repeat;
+            position: absolute;
+            width: 200px;
+            height: 100px;
+            animation: mv1 1s steps(8) infinite,mv2 7s infinite;
+        }
+        @keyframes mv1{
+            from{
+                background-position: 0px 0px;
+            }
+            to{
+                background-position: -1600px 0px;
+            }
+        }
+        @keyframes mv2{
+            from{
+                transform: translate(0px,0px);
+            }
+            to{
+                transform: translate(1000px,0px);
+            }
+        }
+```
+
diff --git "a/\346\235\216\345\250\234/imgs/\346\255\214.gif" "b/\346\235\216\345\250\234/imgs/\346\255\214.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..55f5f8133b8ee99c200e2b3790531fa58dec48fd
Binary files /dev/null and "b/\346\235\216\345\250\234/imgs/\346\255\214.gif" differ
diff --git "a/\346\235\216\345\250\234/imgs/\347\206\212\350\267\221.gif" "b/\346\235\216\345\250\234/imgs/\347\206\212\350\267\221.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..62d537dd871fb5337333e214ced789d9ea47a500
Binary files /dev/null and "b/\346\235\216\345\250\234/imgs/\347\206\212\350\267\221.gif" differ
diff --git "a/\346\235\216\345\250\234/imgs/\351\261\274\346\270\270.gif" "b/\346\235\216\345\250\234/imgs/\351\261\274\346\270\270.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..3fabe628ee615c8b3ada6e100cab19f003bf3251
Binary files /dev/null and "b/\346\235\216\345\250\234/imgs/\351\261\274\346\270\270.gif" differ