diff --git "a/\346\226\271\345\207\244\344\270\271/20241028(\345\212\250\347\224\273).md" "b/\346\226\271\345\207\244\344\270\271/20241028(\345\212\250\347\224\273).md"
new file mode 100644
index 0000000000000000000000000000000000000000..990ca144875ebff2a23cbfc82618484968361d3a
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20241028(\345\212\250\347\224\273).md"
@@ -0,0 +1,361 @@
+## 一.笔记
+
+### 1. 动画
+```js
+ 1. 动画步骤
+ (1) 通过@keyframes定义动画
+ (2) 将动画通过百分比，分割多个节点，然后多个节点中设置属性
+ (3) 通过animation属性调用动画
+
+ 2. 语法：
+ @keyframes 动画名{
+ from{初始状态}
+ to{结束状态}
+ }
+ 调用：
+ animation: 动画名称 持续时间;
+
+ 2.1 其中，animation属性格式：
+ animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
+
+ animation: move1 1s alternate linear 3;
+
+ animation: move2 4s;
+
+ 2.2 animation综合属性拆分
+ (1) 动画名称:
+ animation-name： ;
+ (2) 执行一次动画持续的时间:
+ animation-duration: 4s;
+ (3) 动画执行的次数:
+ animation-iteration-count: 1; //iteration的含义表示迭代animation-duration: 4s;
+ 属性值infinite表示无数次
+ (4) 动画的方向：
+ animation-direction: alternate;
+ 属性值：normal 正常，alternate 反向。
+ (5) 动画延迟执行：
+ animation-delay: 1s;
+ (6) 设置动画结束时，盒子的状态：
+ animation-fill-mode: forwards;
+ 属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。
+ (7) 运动曲线：
+ animation-timing-function: ease-in;
+ 属性值可以是：linear ease-in-out steps()等。
+
+ 注意，如果把属性值写成** steps()，则表示动画不是连续执行**，而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。
+```
+```html
+
+ @keyframes{
+ from{css样式}
+ to{css样式}
+ }
+
+
+ @keyframes{
+ 0%{css样式}
+ ... 百分比
+ 100%{css样式}
+ }
+
+
+
+```
+
+### 2. flex属性布局
+```js
+ 默认文档流中，在一个父容器里放置多个块级的子元素，那么，这些子元素会默认从上往下排列。
+ 如果我给父容器仅仅加一个 `display: flex`属性，此时，子元素们会**在水平方向上，从左至右排列**
+
+ 1. flex优势
+ (1) flex布局的子元素不会脱离文档流
+ (2) flex是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范
+
+ 2. 弹性盒子，子元素
+ - **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
+ - **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
+
+ 3. 主轴和侧轴
+ - 主轴：flex容器的主轴，默认是水平方向，从左向右。
+ - 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
+ PS：主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向
+
+
+```
+### 效果展示
+
+
+
+
+### 主要代码
+```html
+
+
+
+
+
+
+
+
+
+
+
+
海浪无声将夜幕深深淹没，漫过天空尽头的角落
+
+
+
+
+
+
+
+
+
海浪无声将夜幕深深淹没，漫过天空尽头的角落
+
+
+
+
+
+
+
+
+
海浪无声将夜幕深深淹没，漫过天空尽头的角落
+
+
+
+
+
+
+
+
+
海浪无声将夜幕深深淹没，漫过天空尽头的角落
+
+
+
+