diff --git "a/\345\220\264\344\275\263\351\242\226/2024.10.28\345\212\250\347\224\273.md" "b/\345\220\264\344\275\263\351\242\226/2024.10.28\345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0337051605a0f71387fc763be467bdb70c167bce
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/2024.10.28\345\212\250\347\224\273.md"
@@ -0,0 +1,246 @@
+# 动画
+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. 歌词动画效果图
+
+![歌词](sjt5yxtw4.hn-bkt.clouddn.com/歌词.gif)
+css关键代码
+```css
+        .center{
+            margin: 0 auto;
+            height: 370px;
+        }
+        .d1,.d2,.d3,.d4{
+            width: 280px;
+            height: 370px;
+            float: left;
+            margin-right: 20px;
+            padding-left: 5px;
+            color: transparent;
+        }
+        .d1{
+            background: url(./images/hover1.jpg) no-repeat;
+        }
+        .d2{
+            background: url(./images/hover2.jpg) no-repeat;
+        }
+        .d3{
+            background: url(./images/hover3.jpg) no-repeat;
+        }
+        .d4{
+            background: url(./images/hover4.jpg) no-repeat;
+        }
+        .ace:hover{
+            animation: col 2s;
+        }
+        @keyframes col{
+            from{
+                background-color:transparent;
+            }
+            to{
+                background-color: rgba(0,0,0,0.5);
+            }
+        }
+
+        .ace:hover h4{
+            animation: h4 2s;
+        }
+        @keyframes h4{
+            from{
+                color: transparent;
+                transform: translate(0,-100px);
+            }
+            to{
+                transform: translate(0px,200px);
+                color: white;
+            }
+        }
+
+        .ace:hover h5{
+            animation: h5 2s;
+        }
+        @keyframes h5{
+            from{
+                color: transparent;
+                transform: translate(-10px,200px);
+            }
+            to{
+                transform: translate(20px,200px);
+                color: white;
+            }
+        }
+
+        .ace:hover p{
+            animation: p 2s;
+        }
+        @keyframes p{
+            from{
+                color: transparent;
+                transform: translate(0px,300px);
+            }
+            to{
+                transform: translate(0px,200px);
+                color: white;
+            }
+        }
+        
+```
+2. 鲨鱼效果图
+
+![鲨鱼](sjt5yxtw4.hn-bkt.clouddn.com/鲨鱼.gif)
+css关键代码
+```css
+        body{
+            background-color: aqua;
+            position: relative;
+            overflow: hidden;
+        }
+        .d1{
+            width: 174px;
+            height: 126px;
+            background: url(./images/fish.png) no-repeat;
+            animation: mv1 3s steps(12) infinite ,mv11 20s linear infinite;
+        }
+        @keyframes mv1{
+            form{
+                background-position: 0px 0px;
+            }
+            to{
+                background-position: 0px -1512px;
+            }
+        }
+        @keyframes mv11{
+            25%{
+                transform: rotate(45deg) translate(600px,0px);
+            }
+            50%{
+                transform: translate(600px,300px) rotate(90deg);
+            }
+            75%{
+                transform: rotate(180deg) translate(0px,-600px);
+            }
+            100%{
+                transform: rotate(180deg) translate(0px,-600px);
+            }
+        }   
+        .d2{
+            width: 509px;
+            height: 270px;
+            background: url(./images/shark2.png) no-repeat;
+            animation: mv2 3s steps(12) infinite ,mv22 20s linear infinite;
+        }
+        @keyframes mv2{
+            form{
+                background-position: 0px 0px;
+            }
+            to{
+                background-position: 0px -3240px;
+            }
+        }
+        @keyframes mv22{
+            40%{
+                transform: translate(600px,0px);
+            }
+            60%{
+                transform: translate(600px,0px) rotate(180deg);
+            }
+            80%{
+                transform: translate(0px,0px) rotate(180deg);
+            }
+        }   
+```
+3. 白熊效果图
+
+![白熊](sjt5yxtw4.hn-bkt.clouddn.com/白熊.gif)
+css关键代码
+```css
+        body{
+            background-color: green;
+        }
+        div{
+            width: 200px;
+            height: 100px;
+            background: url(./images/bear.png) no-repeat;
+            animation: mv1 2s steps(8) infinite,mv2 9s infinite;
+        }
+        @keyframes mv1{
+            from{
+                background-position: 0px 0px;
+            }
+            to{
+                background-position: -1600px,0px
+            }
+        }
+        @keyframes mv2{
+            from{
+                transform: translate(0px,0px);            }
+            to{
+                transform: translate(600px,0px);
+            }
+        }
+```
\ No newline at end of file