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"
new file mode 100644
index 0000000000000000000000000000000000000000..addc8d90951ba614be9a16087aeafb6a4c76ed85
--- /dev/null
+++ "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"
@@ -0,0 +1,64 @@
+# cSS属性：动画详解
+## 过渡：transition
+traansition包括以下属性：
+
+transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
+
+transition-duration: 1s; 过渡的持续时间。
+
+transition-timing-function: linear; 运动曲线。属性值可以是：
+
+linear 线性
+ease 减速
+ease-in 加速
+ease-out 减速
+ease-in-out 先加速后减速
+transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
+
+上面的四个属性也可以写成综合属性：
+
+
+	transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+
+	transition: all 3s linear 0s;
+如果设置 transition-property: width，意思是只让盒子的宽度在变化时进行过渡
+
+如果设置 transition-property: all，意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡。
+
+## 2D转换
+转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。
+
+转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
+
+在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。
+
+2D转换包括：缩放、移动、旋转。
+1.缩放：scale
+格式：
+
+	transform: scale(x, y);
+
+	transform: scale(2, 0.5);
+参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
+
+取值：大于1表示放大，小于1表示缩小。不能为百分比。
+
+## 2.位移：translate
+格式：
+
+	transform: translate(水平位移, 垂直位移);
+
+	transform: translate(-50%, -50%);
+参数解释：
+
+参数为百分比，相对于自身移动。
+
+正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+
+## 3.旋转：rote
+格式：
+
+	transform: rotate(角度);
+
+	transform: rotate(45deg);
+参数解释：正值 顺时针；负值：逆时针。
\ No newline at end of file
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"
new file mode 100644
index 0000000000000000000000000000000000000000..599dbe48c3fba3fe0549e88d5d79f6f863d9acc8
Binary files /dev/null and "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/1.png" 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"
new file mode 100644
index 0000000000000000000000000000000000000000..e08ba74213094bf8a7cb7c6e84a9adc499518aae
Binary files /dev/null and "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/2.png" 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"
new file mode 100644
index 0000000000000000000000000000000000000000..03b86c8249d78b653db95fff220ebccaec7cee5f
Binary files /dev/null and "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/20231017204046.png" 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"
new file mode 100644
index 0000000000000000000000000000000000000000..aa91346b17db7b1c0a0da3be60a79c1537250e8e
Binary files /dev/null and "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/20231017210305.png" 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"
new file mode 100644
index 0000000000000000000000000000000000000000..b2364f5aa00b1865127c7d57d569496999752a23
Binary files /dev/null and "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/20231017210408.png" 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"
new file mode 100644
index 0000000000000000000000000000000000000000..09b3d0aa10d28a8a6262ffd73e88e221f92381f4
--- /dev/null
+++ "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"
@@ -0,0 +1,202 @@
+<!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"
new file mode 100644
index 0000000000000000000000000000000000000000..1ba3b393e92797493150bb43edb2cb6d61177c9a
Binary files /dev/null and "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/3.jpg" 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"
new file mode 100644
index 0000000000000000000000000000000000000000..e357da5372e0ec5dec92bf2a74c72927abc847e6
--- /dev/null
+++ "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/demo.html"
@@ -0,0 +1,28 @@
+<!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