diff --git "a/\351\231\210\346\242\246\346\266\265/20241028,2D,\345\212\250\347\224\273.md" "b/\351\231\210\346\242\246\346\266\265/20241028,2D,\345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ea2f75e32512a032a243ed13f687803a4fad49bc
--- /dev/null
+++ "b/\351\231\210\346\242\246\346\266\265/20241028,2D,\345\212\250\347\224\273.md"
@@ -0,0 +1,324 @@
+
+***主要代码***
+```css
+body{
+ background-color:aquamarine;
+ }
+ *{
+ margin: 0px;
+ padding: 0px;
+ }
+.d1{
+ animation: mv2 10s infinite;
+ position: relative;
+}
+.d2{
+ height: 270px;
+ width: 509px;
+ background-image: url(./imgs/image.png);
+ animation: mv1 1s steps(12) infinite;
+}
+.d3{
+ animation: mv4 10s infinite;
+ position: absolute;
+ left: 50%;
+ top: 0;
+}
+.d4{
+ height: 126px;
+ width: 174px;
+ background-image: url(./imgs/fish.png);
+ animation: mv3 1s steps(12) infinite;
+}
+@keyframes mv1 {
+ 0% { background-position: 0px 0px;}
+ 100% {background-position: 0px -3240px;}
+}
+@keyframes mv2 {
+ 0% { transform: translate(0px,0px);}
+ 100% {transform: translate(500px,0px);}
+}
+@keyframes mv3 {
+ 0% { background-position: 0px 0px;}
+ 100% {background-position: 0px -1512px;}
+}
+@keyframes mv4 {
+ 0% {
+ transform: translate(0px,0px);
+ transform: rotate(180deg);
+ transition: all;
+ }
+ 25%{
+ transform: translate(-200px,200px);
+ transform: rotate(180deg);
+ transition: all;
+ }
+ 50%{transform: translate(-400px,100px);}
+ 75%{
+ transform: translate(300px,150px);
+ transform: rotate(180deg);
+ transition: all;
+ }
+ 100%{transform: translate(0px,0px);}
+
+
+
+}
+```
+
+
+## 过渡：transition
+可以实现元素**不同状态间的平滑过渡**（补间动画），经常用来制作动画效果。
+- 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
+- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
+
+transition 包括以下属性：
+- `transition-property: all;` 如果希望所有的属性都发生过渡，就使用all。
+- `transition-duration: 1s;` 过渡的持续时间。
+- `transition-timing-function: linear;` 运动曲线。属性值可以是：
+ - `linear` 线性
+ - `ease` 减速
+ - `ease-in` 加速
+ - `ease-out` 减速
+ - `ease-in-out` 先加速后减速
+
+- `transition-delay: 1s;` 过渡延迟。多长时间后再执行这个过渡动画。
+
+上面的四个属性也可以写成**综合属性**：
+
+```javascript
+ transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+
+ transition: all 3s linear 0s;
+```
+## 2D 转换
+通过 `transform` 转换来实现 2D 转换或者 3D 转换。
+
+2D转换包括：缩放、移动、旋转。
+### 1、缩放：`scale`
+格式：
+```javascript
+ transform: scale(x, y);
+ transform: scale(2, 0.5);
+```
+参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
+
+取值：大于1表示放大，小于1表示缩小。不能为百分比。
+### 2、位移：translate
+格式：
+```javascript
+ transform: translate(水平位移, 垂直位移);
+ transform: translate(-50%, -50%);
+```
+参数解释：
+- 参数为百分比，相对于自身移动。
+- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+
+**应用：**让绝对定位中的盒子在父亲里居中
+
+我们知道，如果想让一个**标准流中的盒子在父亲里居中**（水平方向看），可以将其设置`margin: 0 auto`属性。
+
+可如果盒子是绝对定位的，此时已经脱标了,以下方法
+```css
+ div {
+ width: 600px;
+ height: 60px;
+ background-color: red;
+ position: absolute; /*绝对定位的盒子*/
+ left: 50%; /*首先，让左边线居中*/
+ top: 0;
+ transform: translate(-50%); /*然后，利用translate，往左走自己宽度的一半*/
+ }
+```
+### 3、旋转：rotate
+格式：
+```javascript
+ transform: rotate(角度);
+ transform: rotate(45deg);
+```
+参数解释：正值 顺时针；负值：逆时针。
+
+#### rotate 旋转时，默认是以盒子的正中心为坐标原点的如果想**改变旋转的坐标原点**，可以用`transform-origin`属性。格式如下：
+```javascript
+ transform-origin: 水平坐标 垂直坐标;
+ transform-origin: 50px 50px;
+ transform-origin: center bottom; //旋转时，以盒子底部的中心为坐标原点
+```
+## 3D 转换
+
+### 1、旋转：rotateX、rotateY、rotateZ
+**格式：**
+```javascript
+ transform: rotateX(360deg); //绕 X 轴旋转360度
+ transform: rotateY(360deg); //绕 Y 轴旋转360度
+ transform: rotateZ(360deg); //绕 Z 轴旋转360度
+```
+（1）rotateX 举例：
+```css
+ /* 所有的3d旋转，对着正方向去看，都是顺时针旋转*/
+ .rotateX:hover img {
+ transform: rotateX(360deg);
+ }
+```
+（2）rotateY 举例：
+```css
+ .rotateY {
+ perspective: 150px;
+ }
+ img {
+ transition: all 1s;
+ }
+ .rotateY:hover img {
+ transform: rotateY(360deg);
+ }
+```
+### 2、移动：translateX、translateY、translateZ
+
+**格式：**
+
+```javascript
+ transform: translateX(100px); //沿着 X 轴移动
+
+ transform: translateY(360px); //沿着 Y 轴移动
+
+ transform: translateZ(360px); //沿着 Z 轴移动
+
+```
+### 3、透视：perspective
+上方代码中，加个透视的属性，方能看到3D的效果；没有这个属性的话，图片旋转的时候，像是压瘪了一样,透视的是要加给图片的父元素 div，方能生效
+
+格式有两种写法：
+
+- 作为一个属性，设置给父元素，作用于所有3D转换的子元素
+- 作为 transform 属性的一个值，做用于元素自身。
+
+格式举例：
+```css
+perspective: 500px;
+```
+## 动画
+
+动画是CSS3中具有颠覆性的特征，可通过设置**多个节点** 来精确控制一个或一组动画，常用来实现**复杂**的动画效果。
+
+### 1、定义动画的步骤
+
+（1）通过@keyframes定义动画；
+
+（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+
+（3）在指定元素里，通过 `animation` 属性调用动画。
+
+我们在 CSS3 中**定义动画**的时候，也是**先定义，再调用**：
+
+```css
+ 定义动画：
+ @keyframes 动画名{
+ from{ 初始状态 }
+ to{ 结束状态 }
+ }
+ 调用：
+ animation: 动画名称 持续时间；
+```
+animation属性如下：
+```css
+ animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
+ animation: move1 1s alternate linear 3;
+ animation: move2 4s;
+```
+
+**定义动画的格式举例：**
+
+```css
+ .box {
+ /* 调用动画
+ animation: 动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。infinite 表示无限次
+ animation: move 1s alternate linear 3;*/
+ animation: move2 4s;
+ }
+ /* 方式一：定义一组动画*/
+ @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 是综合属性,可以拆开来看
+
+（1）动画名称：
+```css
+ animation-name: move;
+```
+（2）执行一次动画的持续时间：
+```css
+ animation-duration: 4s;
+```
+备注：上面两个属性，是必选项，且顺序固定。
+
+（3）动画的执行次数：
+```css
+ animation-iteration-count: 1; //iteration的含义表示迭代
+```
+属性值`infinite`表示无数次。
+
+（3）动画的方向：
+```css
+ animation-direction: alternate;
+```
+属性值：normal 正常，alternate 反向。
+
+（4）动画延迟执行：
+```css
+ animation-delay: 1s;
+```
+（5）设置动画结束时，盒子的状态：
+```css
+ animation-fill-mode: forwards;
+```
+属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。
+
+（6）运动曲线：
+```css
+ animation-timing-function: ease-in;
+```
+属性值可以是：linear ease-in-out steps()等。
+
+**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行
\ No newline at end of file