diff --git "a/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2321.html" "b/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2321.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8a1a925d9e927c2f11ddfc76a1d7326c5551efb1
--- /dev/null
+++ "b/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2321.html"
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            background-color: cornflowerblue;
+        }
+
+        .box {
+            width: 300px;
+            height: 300px;
+            /*border: 1px solid #000;*/
+            margin: 50px auto;
+            position: relative;
+        }
+
+        .box > div {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            /*border: 1px solid #000;*/
+            border-radius: 50%;
+            transition: all 2s;
+            backface-visibility: hidden;
+        }
+
+        .box1 {
+            background: url(./20231017211318.png) left 0 no-repeat; /*默认显示图片的左半边*/
+        }
+
+        .box2 {
+            background: url(./20231017211318.png) right 0 no-repeat;
+            transform: rotateY(180deg); /*让图片的右半边默认时，旋转180度，就可以暂时隐藏起来*/
+
+        }
+
+        .box:hover .box1 {
+            transform: rotateY(180deg); /*让图片的左半边转消失*/
+        }
+
+        .box:hover .box2 {
+            transform: rotateY(0deg); /*让图片的左半边转出现*/
+        }
+    </style>
+</head>
+<body>
+<div class="box">
+    <div class="box1"></div>
+    <div class="box2"></div>
+    <img src="./20231017211318.png" alt="">
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2322.html" "b/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2322.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b6e54933218ac6e365f0de341a06bd182e133169
--- /dev/null
+++ "b/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2322.html"
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+            
+        }
+        .box{
+            height: 300px;
+            width: 800px;
+            background-color: white;
+            
+            margin: auto;
+        }
+        .c1{
+            height: 230px;
+            width: 230px;
+            text-align: center;
+            margin-left: 26px;
+            float: left;
+            background-color: #fff;
+            position: relative;
+            top: 0;
+            overflow: hidden;/* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */
+            transition: all 0.5s;/* 从最初到鼠标悬停时的过渡 */
+        }
+        .c1{
+            margin-top: 20px;
+        }
+        .c1 .orange{
+
+            position: absolute;
+            left: 0px;
+            bottom: -100px;
+            width: 100%;
+            height: 80px;
+            background-color: orangered;
+            transition: all 0.5s;
+        }
+        .c1:hover{
+            top: -6px;
+            box-shadow: 0 0 10px pink;
+        }
+        .c1:hover .orange{
+            bottom: 0;
+        }
+        
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="c1">
+            <img src="./1.png" alt="">
+        </div>
+
+        <div class="c1">
+            <img src="./2.png" alt="">
+            <span class="orange"></span>
+        </div>
+
+        <div class="c1"> <img src="./3.jpg" alt="">
+            <span class="orange"></span>
+        </div>
+
+    </div>   
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2323.html" "b/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2323.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c5ff7f07844dae506756fd5656d59882d8a4c794
--- /dev/null
+++ "b/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2323.html"
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        .box{
+            height: 200px;
+            width: 200px;
+            background-color: lightblue;
+            margin: 200px auto;
+            color: green;
+            font-size: 30px;
+            text-align: center;
+            transition: all 2s;
+            
+        }
+        .box:hover{
+            transform: rotate(-405deg);
+        }
+    </style>
+</head>
+<body>
+    <div class="box">我会转</div>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2324.html" "b/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2324.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6c5f71da6e3d851ee4459cde88f364879726a186
--- /dev/null
+++ "b/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2324.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">
+    <style>
+        html,body{
+            height: 100%;
+        }
+        *{
+            background-color: orange;
+        }
+        .rocket{
+            position: relative;
+            left: 50px;
+            top: 550px;
+            transform: translate(-400px,200px) rotate(60deg); 
+            transition: all 1s ease-in;
+        }
+        body:hover .rocket{
+            transform:translate(1250px,-500px) rotate(45deg);
+        }
+    </style>
+</head>
+<body>
+    <img class="rocket" src="./20231017204046.png" alt="">
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2325.html" "b/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2325.html"
new file mode 100644
index 0000000000000000000000000000000000000000..ef8d186f2b839eb258749bb59c89f180da63a8aa
--- /dev/null
+++ "b/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1027\344\275\234\344\270\2325.html"
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            background-color: #eee;
+        }
+
+        .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">
+    <img src="./20231017210305.png" alt="">
+    <img src="./20231017210408.png" alt="">
+    <img src="./20231017210305.png" alt="">
+    <img src="./20231017210408.png" alt="">
+    <img src="./20231017210305.png" alt="">
+    <img src="./20231017210408.png" alt="">
+    <img src="./20231017210305.png" alt="">
+    <img src="./20231017210408.png" alt="">
+    <img src="./20231017210305.png" alt="">
+    <img src="./20231017210408.png" alt="">
+    <img src="./20231017210305.png" alt="">
+    <img src="./20231017210408.png" alt="">
+    <img src="./20231017210305.png" alt="">
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1021\347\254\254\345\215\201\344\272\214\346\254\241\347\254\224\350\256\260.md" "b/\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1021\347\254\254\345\215\201\344\272\214\346\254\241\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f0470a0f37d107871970e5f41785d2cac960e4bf
--- /dev/null
+++ "b/\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1021\347\254\254\345\215\201\344\272\214\346\254\241\347\254\224\350\256\260.md"
@@ -0,0 +1,15 @@
+## 定位
+### position: absolute;
+### 绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
+### 绝对定位的盒子脱离了标准文档流。
+### position: relative;
+### 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
+### position: fixed;
+### 固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
+### z-index属性:
+### z-index属性:表示谁压着谁。数值大的压盖住数值小的。
+### （1）属性值大的位于上层，属性值小的位于下层。
+### （2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
+### （3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
+### （4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。
+### （5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
\ No newline at end of file
diff --git "a/\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1023\347\254\254\345\215\201\344\270\211\346\254\241\347\254\224\350\256\260.md" "b/\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1023\347\254\254\345\215\201\344\270\211\346\254\241\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b3193e6b081bbfecd29f09d6f6e8b781cc7090b8
--- /dev/null
+++ "b/\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1023\347\254\254\345\215\201\344\270\211\346\254\241\347\254\224\350\256\260.md"
@@ -0,0 +1,46 @@
+## 选择器
+##   .box 类名选择器
+##   #box　id选择器
+##   div p 后代选择器
+##   div.box 交集选择器
+##   div,p,span 并集选择器
+##   div>p 子代选择器
+##   * : 通配符
+##   div+p: 选中div后面相邻的第一个p
+##   div~p: 选中的div后面所有的p
+
+## 属性选择器
+### 属性选择器的标志性符号是 []。
+
+
+## 结构伪类选择器
+### 伪类选择器的标志性符号是 :。
+
+### CSS中有一些伪类选择器，比如:link、:visited、:hover、:active、:focus。
+
+### CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的结构伪类选择器：即通过结构来进行筛选。
+
+### 1、格式：（第一部分）（重要）
+
+### E:first-child 匹配父元素的第一个子元素E。
+ 
+### E:last-child 匹配父元素的最后一个子元素E。
+ 
+### E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。
+ 
+### E:nth-child(odd) 匹配奇数
+
+### E:nth-child(even) 匹配偶数
+
+### E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。
+
+## 伪元素选择器
+### 伪元素选择器的标志性符号是 ::。
+
+### 1、格式：（第一部分）
+
+### E::before 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+
+### E::after 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+
+### E:after、E:before 在旧版本里是伪类，在 CSS3 这个新版本里是伪元素。新版本里，E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
\ No newline at end of file
diff --git "a/\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1024\347\254\254\345\215\201\345\233\233\346\254\241\347\254\224\350\256\260.md" "b/\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1024\347\254\254\345\215\201\345\233\233\346\254\241\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0a9d5db472a631b504d13f109ea7e164d9926251
--- /dev/null
+++ "b/\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1024\347\254\254\345\215\201\345\233\233\346\254\241\347\254\224\350\256\260.md"
@@ -0,0 +1,38 @@
+# 动画
+### 过渡：transition
+
+### 2D 转换 transform
+
+### 3D 转换 transform
+
+### 动画：animation
+
+### 过渡：transition
+
+## 1、缩放：scale
+### 格式：
+### transform: scale(x, y);
+
+### transform: scale(2, 0.5);
+### 参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。 取值：大于1表示放大，小于1表示缩小。不能为百分比。
+
+## 2、位移：translate
+### 格式：
+### transform: translate(水平位移, 垂直位移);
+### transform: translate(-50%, -50%);
+### 参数解释：
+
+
+## 3、旋转：rotate
+### 格式：
+
+### 	transform: rotate(角度);
+
+### 	transform: rotate(45deg);
+### 参数解释：正值 顺时针；负值：逆时针。
+
+### 3D 转换
+### 1、旋转：rotateX、rotateY、rotateZ
+### 3D坐标系（左手坐标系）
+
+
