From 87b7d71cdcfbdd1ca2b447435312c632e2e1291f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=81=AD=E7=84=95?= <“798441668@qq.com”>
Date: Sun, 27 Oct 2024 20:56:39 +0800
Subject: [PATCH] zuoye&biji

---
 ...\345\256\232\344\275\215\344\270\200.html" |  38 ++++++
 ...\345\256\232\344\275\215\344\270\211.html" |  45 +++++++
 ...\345\256\232\344\275\215\344\272\214.html" |  70 +++++++++++
 ...\347\201\265\345\233\276\344\270\200.html" |  61 +++++++++
 ...\347\201\265\345\233\276\344\272\214.html" | 104 +++++++++++++++
 ...\345\212\250\347\224\273\344\270\200.html" |  86 +++++++++++++
 ...\345\212\250\347\224\273\344\270\211.html" |  60 +++++++++
 ...\345\212\250\347\224\273\344\272\214.html" | 108 ++++++++++++++++
 ...\350\277\207\346\270\241\344\270\200.html" |  77 ++++++++++++
 ...\350\277\207\346\270\241\344\270\211.html" |  31 +++++
 ...\350\277\207\346\270\241\344\272\214.html" |  26 ++++
 ...\350\277\207\346\270\241\344\272\224.html" |  54 ++++++++
 ...\350\277\207\346\270\241\345\233\233.html" |  98 +++++++++++++++
 .../2024-1021-\345\256\232\344\275\215.md"    |  29 +++++
 ...3-\347\262\276\347\201\265\345\233\276.md" | 119 ++++++++++++++++++
 .../2024-1024-\345\212\250\347\224\273.md"    | 111 ++++++++++++++++
 16 files changed, 1117 insertions(+)
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\200.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\211.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\272\214.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\270\200.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\272\214.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\200.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\211.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\272\214.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\200.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\211.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\214.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\224.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\345\233\233.html"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1021-\345\256\232\344\275\215.md"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1023-\347\262\276\347\201\265\345\233\276.md"
 create mode 100644 "\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1024-\345\212\250\347\224\273.md"

diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\200.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\200.html"
new file mode 100644
index 0000000..52a5099
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\200.html"
@@ -0,0 +1,38 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    /* .father {
+        width: 500px;
+        height: 500px;
+        position: relative;
+    } */
+
+    .son {
+        width: 200px;
+        height: 100px;
+        border: 1px solid gray;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -50px;
+        margin-left: -100px;
+    }
+</style>
+</head>
+
+<body>
+<div class="father">
+    <div class="son">666</div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\211.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\211.html"
new file mode 100644
index 0000000..7b6d246
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\211.html"
@@ -0,0 +1,45 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    p {
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+        width: 120px;
+        height: 100px;
+    }
+
+    .tooltip {
+        display: none;
+        width: 120px;
+        background-color: #555;
+        color: #fff;
+        text-align: center;
+        border-radius: 5px;
+        padding: 5px;
+        position: absolute;
+        z-index: 1;
+        bottom: 25px;
+        left: 50%;
+        margin-left: -60px;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+
+    p:hover .tooltip {
+        display: block;
+        opacity: 1;
+    }
+</style>
+</head>
+
+<body>
+<p>别打开<span class="tooltip"> 说了别打开</span></p>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\272\214.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\272\214.html"
new file mode 100644
index 0000000..ad848cb
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\272\214.html"
@@ -0,0 +1,70 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    .top {
+        width: 100%;
+        height: 50px;
+        background-color: black;
+        position: relative;
+        position: fixed;
+
+    }
+
+    .bottom {
+        width: 200px;
+        height: 900px;
+        position: absolute;
+        margin-top: 50px;
+    }
+
+</style>
+</head>
+
+<body>
+<div class="top">
+</div>
+
+    <div class="bottom">
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+        <p>666666666666666666666666666666</p>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\270\200.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\270\200.html"
new file mode 100644
index 0000000..2203b70
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\270\200.html"
@@ -0,0 +1,61 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+    }
+ 
+    .d1{
+        width: 70px;
+        height: 76px;
+        background: url('../照骗/图标.png') no-repeat -1px -1px;
+        
+    }
+    .d2{
+        width: 70px;
+        height: 76px;
+        background: url('../照骗/图标.png') no-repeat -80px 0px;
+    }
+    .d3{
+        width: 70px;
+        height: 76px;
+        background: url('../照骗/图标.png') no-repeat -163px 0px;
+    }
+    .d4{
+        width: 70px;
+        height: 76px;
+        background: url('../照骗/图标.png') no-repeat -6px -90px;
+    }
+    .d5{
+        width: 70px;
+        height: 76px;
+        background: url('../照骗/图标.png') no-repeat -85px -80px;
+    }
+    .d6{
+        width: 70px;
+        height: 76px;
+        background: url('../照骗/图标.png') no-repeat -168px -81px;
+    }
+    span{
+        display: inline-block;
+        float: left;
+       margin-left: 70px;
+       margin-top: -60px;
+       font-size: 30px;
+    }
+</style>
+</head>
+<body>
+<p class="d1"></p><span>付款图标</span>
+<p class="d2"></p><span>存款图标</span>
+<p class="d3"></p><span>删除图标</span>
+<p class="d4"></p><span>粘贴图标</span>
+<p class="d5"></p><span>笑脸图标</span>
+<p class="d6"></p><span>编辑图标</span>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\272\214.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\272\214.html"
new file mode 100644
index 0000000..8188316
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\272\214.html"
@@ -0,0 +1,104 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    .all {
+        width: 440px;
+        height: 500px;
+        margin: 20 auto;
+    }
+
+    .top {
+        width: 440px;
+        height: 280px;
+        background-image: url('../照骗/万达.png');
+    }
+
+    .le {
+        width: 52px;
+        height: 28px;
+        background: url('../照骗/多套餐.png') no-repeat -108px 0px;
+        margin-left: 15px;
+        float: left;
+        margin-top: -10px;
+        position: relative;
+    }
+
+    .middle {
+        width: 430px;
+        height: 50px;
+        background-color: rgb(0, 0, 0, 0.5);
+        position: absolute;
+        top: 250px;
+        color: white;
+        line-height: 50px;
+        padding-left: 10px;
+    }
+
+    .bottom {
+        width: 436px;
+        height: 150px;
+        background-color: white;
+        border: 2px solid orange;
+        border-top: none;
+    }
+
+    .p1 {
+        font-size: 18px;
+        font-weight: 700;
+    }
+
+    .p2 {
+        font-size: 16px;
+        color: gray;
+        text-indent: 0.5em;
+    }
+
+    p {
+        padding-top: 15px;
+        padding-left: 10px;
+    }
+
+    .money {
+        float: left;
+        font-size: 25px;
+        color: #ff891e;
+        padding-left: 18px;
+        padding-top: 25px;
+    }
+
+    .m {
+        color: gray;
+        float: right;
+        padding-right: 15px;
+        padding-top: 33px;
+    }
+</style>
+</head>
+
+<body>
+<div class="all">
+    <div class="top">
+        <div class="le"></div>
+        <div class="middle">广东深圳宝安区建安一路海雅缤纷城4楼</div>
+    </div>
+    <div class="bottom">
+        <div >
+            <p class="p1">【海滩缤纷城】万达影城（深圳海雅广场...</p>
+            <p class="p2">单人电影票，可观看2D</p>
+        </div>
+        <div class="money">￥35 <span style="color: gray;text-decoration: line-through;font-size: 14px;">￥80</span>
+        </div>
+        <div class="m">已售<span style="color:#ff1d6c;">225</span></div>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\200.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\200.html"
new file mode 100644
index 0000000..c983397
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\200.html"
@@ -0,0 +1,86 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    .content {
+      width: 1200px;
+      height: 320px;
+      padding-left: 20px;
+      margin: 80px auto;
+      overflow: hidden;
+    }
+
+    .xg {
+      width: 230px;
+      height: 370px;
+      text-align: center;
+      margin-right: 20px;
+      float: left;
+      position: relative;
+      overflow: hidden;
+      transition: all .5s;
+    }
+
+    img {
+      transition: filter 1s ease;
+    }
+
+    .xg:hover img {
+      filter: brightness(0.7);
+    }
+
+    .cs {
+      position: absolute;
+      left: 0;
+      bottom: -80px;
+      width: 100%;
+      height: 200px;
+      color: white;
+      line-height: 40px;
+      font-size: 18px;
+      transition: all .5s;
+      text-align: center;
+      opacity: 0;
+    }
+
+    .xg:hover {
+      top: -5px;
+      box-shadow: 0 0 15px #AAA;
+    }
+
+    .xg:hover .cs {
+      bottom: 10px;
+      opacity: 1;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="content">
+    <div class="xg">
+      <img src="../照骗/2024-1024-动画素材/image1.png" alt="">
+      <span class="cs">《大鱼》<br>演唱：周深<br>海浪无声将夜幕深深淹没<br>漫过天空尽头的角落</span>
+    </div>
+    <div class="xg">
+      <img src="../照骗/2024-1024-动画素材/image2.png" alt="">
+      <span class="cs">《大鱼》<br>演唱：周深<br>海浪无声将夜幕深深淹没<br>漫过天空尽头的角落</span>
+    </div>
+    <div class="xg">
+      <img src="../照骗/2024-1024-动画素材/image3.png" alt="">
+      <span class="cs">《大鱼》<br>演唱：周深<br>海浪无声将夜幕深深淹没<br>漫过天空尽头的角落</span>
+    </div>
+    <div class="xg">
+      <img src="../照骗/2024-1024-动画素材/image4.png" alt="">
+      <span class="cs">《大鱼》<br>演唱：周深<br>海浪无声将夜幕深深淹没<br>漫过天空尽头的角落</span>
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\211.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\211.html"
new file mode 100644
index 0000000..0039f1d
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\211.html"
@@ -0,0 +1,60 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      background-color:pink;
+    }
+
+    .bx {
+      width: 200px;
+      height: 100px;
+      margin: 100px auto;
+      background: url(../照骗/2024-1024-动画素材/白熊.png) left;
+      animation: bxRun 1s steps(8) infinite;
+      display: inline-block;
+    }
+
+    .bxBox {
+      width: 200px;
+      height: 100px;
+      animation: bxBoxRun 20s linear infinite;
+
+    }
+
+    @keyframes bxRun {
+      0% {
+        background-position: 1600px;
+      }
+
+      100% {
+        background-position: 0px;
+      }
+    }
+
+    @keyframes bxBoxRun {
+      0% {
+        transform: translateX(-100px);
+      }
+
+      100% {
+        transform: translateX(1500px);
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="bxBox">
+    <div class="bx"></div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\272\214.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\272\214.html"
new file mode 100644
index 0000000..5928e26
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\272\214.html"
@@ -0,0 +1,108 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      background-color: rgb(138, 219, 237);
+    }
+
+    .lsdy {
+      width: 509px;
+      height: 270px;
+      margin: 100px auto;
+      background: url(../照骗/2024-1024-动画素材/鲨鱼.png) left top;
+      animation: lsdyRun 1s steps(8) infinite;
+      display: inline-block;
+    }
+
+    .lsdyBox {
+      width: 509px;
+      height: 270px;
+      animation: lsdyBoxRun 20s linear infinite;
+      display: inline-block;
+    }
+
+    @keyframes lsdyRun {
+      0% {}
+
+      100% {
+        background-position: left -2160px;
+      }
+    }
+
+    @keyframes lsdyBoxRun {
+      0% {
+        transform: translateX(-600px);
+      }
+
+      100% {
+        transform: translateX(3000px);
+      }
+    }
+
+    .dly {
+      width: 175px;
+      height: 125px;
+      margin: 100px auto;
+      background: url(../照骗/2024-1024-动画素材/灯笼鱼.png) left top;
+      animation: dlyRun 1s steps(8) infinite;
+      display: inline-block;
+    }
+
+    .dlyBox {
+      width: 175px;
+      height: 125px;
+      animation: dlyBoxRun 15s linear infinite;
+      display: inline-block;
+    }
+
+    @keyframes dlyRun {
+      0% {}
+
+      100% {
+        background-position: left -1000px;
+      }
+    }
+
+    @keyframes dlyBoxRun {
+      0% {
+        transform: translateX(-500px) translateY(-140px);
+      }
+
+      25% {
+        transform: translateX(300px) translateY(-140px) rotate(90deg);
+      }
+
+      50% {
+        transform: translateX(300px) translateY(500px) rotate(180deg);
+      }
+
+      75% {
+        transform: translateX(-500px) translateY(500px) rotate(180deg);
+      }
+
+      100% {
+        transform: translateX(-500px) translateY(-140px) rotate(360deg);
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="lsdyBox">
+    <div class="lsdy"></div>
+  </div>
+  <div class="dlyBox">
+    <div class="dly"></div>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\200.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\200.html"
new file mode 100644
index 0000000..8157e61
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\200.html"
@@ -0,0 +1,77 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    body {
+        margin: 0;
+        padding: 0;
+        background-color: #eeeeee;
+    }
+
+    .big {
+        width: 800px;
+        height: 320px;
+        padding-left: 20px;
+        margin: 80px auto;
+    }
+
+    .xi {
+        width: 230px;
+        height: 300px;
+        text-align: center;
+        margin-right: 20px;
+        background-color: #FFF;
+        float: left;
+        position: relative;
+        top: 0;
+        overflow: hidden;
+        transition: all .5s;
+
+    }
+
+    .xi img {
+        margin-top: 30px;
+    }
+
+    .xi span {
+        position: absolute;
+        left: 0;
+        bottom: -80px;
+        width: 100%;
+        height: 80px;
+        background-color: #ff6700;
+        transition: all .5s;
+    }
+
+
+    .xi:hover {
+        top: -5px;
+        box-shadow: 0 0 15px #AAA;
+    }
+
+    .xi:hover span {
+        bottom: 0;
+    }
+</style>
+</head>
+
+<body>
+<div class="big">
+    <div class="xi">
+        <img src="../照骗/2024-1024-过渡素材/手表.png" alt="">
+    </div>
+
+    <div class="xi">
+        <img src="../照骗/2024-1024-过渡素材/电视.png" alt="">
+        <span class="desc"></span>
+    </div>
+    <div class="xi">
+        <img src="../照骗/2024-1024-过渡素材/手机.png" alt="">
+        <span></span>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\211.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\211.html"
new file mode 100644
index 0000000..8918550
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\211.html"
@@ -0,0 +1,31 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    body {
+      height: 100vh;
+      background-color: #DE8910;
+    }
+
+    .plane {
+      position: absolute;
+      left: 100px;
+      top: 600px;
+      height: 120px;
+      transform: translate(-200px, 200px) rotate(45deg);
+      transition: all 1s ease-in;
+    }
+
+    body:hover .plane {
+      transform: translate(500px, -500px) rotate(45deg);
+    }
+  </style>
+</head>
+
+<body>
+  <img class="plane" src="../照骗/2024-1024-过渡素材/火箭.png" alt="" />
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\214.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\214.html"
new file mode 100644
index 0000000..38bfce2
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\214.html"
@@ -0,0 +1,26 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    div {
+        width: 300px;
+        height: 300px;
+        background-color: pink;
+        font-size: 20px;
+        color: white;
+        transition: all 2s;
+    }
+
+    div:hover {
+        transform: rotate(-410deg);
+    }
+</style>
+</head>
+
+<body>
+<div>遥遥领先</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\224.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\224.html"
new file mode 100644
index 0000000..deb37dd
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\224.html"
@@ -0,0 +1,54 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    .box {
+      width: 305px;
+      height: 325px;
+      margin: 50px auto;
+      position: relative;
+      background-color: pink;
+      padding-top: 10px;
+    }
+
+    .box1,
+    .box2 {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      border-radius: 50%;
+      transition: all 2s;
+      backface-visibility: hidden;
+    }
+
+    .box1 {
+      background: url('../照骗/2024-1024-过渡素材/品牌.png') left 0 no-repeat;
+    }
+
+    .box2 {
+      background: url('../照骗/2024-1024-过渡素材/品牌.png') right 0 no-repeat;
+      transform: rotateY(180deg);
+    }
+
+    .box:hover .box1 {
+      transform: rotateY(180deg);
+    }
+
+    .box:hover .box2 {
+      transform: rotateY(0deg);
+    }
+  </style>
+</head>
+
+<body>
+  <div class="bgc">
+    <div class="box">
+      <div class="box1"></div>
+      <div class="box2"></div>
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\345\233\233.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\345\233\233.html"
new file mode 100644
index 0000000..c8b8ac1
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\345\233\233.html"
@@ -0,0 +1,98 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<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>
+
+</head>
+
+<body>
+  <div class="box">
+    <img src="../照骗/2024-1024-过渡素材/J.png" />
+    <img src="../照骗/2024-1024-过渡素材/Q.png" />
+    <img src="../照骗/2024-1024-过渡素材/J.png" />
+    <img src="../照骗/2024-1024-过渡素材/Q.png" />
+    <img src="../照骗/2024-1024-过渡素材/J.png" />
+    <img src="../照骗/2024-1024-过渡素材/Q.png" />
+    <img src="../照骗/2024-1024-过渡素材/J.png" />
+    <img src="../照骗/2024-1024-过渡素材/Q.png" />
+    <img src="../照骗/2024-1024-过渡素材/J.png" />
+    <img src="../照骗/2024-1024-过渡素材/Q.png" />
+    <img src="../照骗/2024-1024-过渡素材/J.png" />
+    <img src="../照骗/2024-1024-过渡素材/Q.png" />
+    <img src="../照骗/2024-1024-过渡素材/J.png" />
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1021-\345\256\232\344\275\215.md" "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1021-\345\256\232\344\275\215.md"
new file mode 100644
index 0000000..ec5b831
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1021-\345\256\232\344\275\215.md"
@@ -0,0 +1,29 @@
+## 1.相对定位(position:relative)
+自身原来的位置，并保留自身位置
+## 2.绝对定位（position:absolute）
+对于祖先元素，没有父亲就以浏览器为准， 或者父亲无定位（不保留位置）
+## 3.固定定位（position:fixed）
+以浏览器可视窗口，不随滚动条滚动（不占有位置）
+
+常用“子绝父相”
+
+(小技巧)：固定在版心右侧位置
+1. 让固定定位的盒子left:50%,走到浏览器可视区（版心）的一半
+2. 让固定定位的盒子margin-left:版心宽度的一半距离，多走版心宽度的一半位置，就可以让固定定位的盒子贴着版心右侧对齐
+
+## 4.粘性定位（不常用）
+sticky  必须添加（top，bottom，left，right其中一个才有效）
+
+## 5.定位叠放顺序：（数值越大，越靠上）
+z-index:1(只有定位的盒子才有用)
+
+### 加了绝对定位的盒子不能水平居中怎么办？
+方法：left:50%,top:50%,margin-left:-100px,margin-top:-100px
+
+#### 定位的特性：
+1. 行内元素加了绝对或相对定位，可不设宽高（由内容决定）
+2. 会完全压住盒子和内容，与浮动不同
+## 定位效果图
+![alt text](image.png)
+![alt text](image-1.png)
+![alt text](image-2.png)
\ No newline at end of file
diff --git "a/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1023-\347\262\276\347\201\265\345\233\276.md" "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1023-\347\262\276\347\201\265\345\233\276.md"
new file mode 100644
index 0000000..f78c2da
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1023-\347\262\276\347\201\265\345\233\276.md"
@@ -0,0 +1,119 @@
+## 精灵图
+精灵图（Sprite），也被称为雪碧图或CSS Sprite，是一种有效的网页图片应用处理方式。
+
+1. 一、精灵图的介绍
+定义：精灵图通过将多个小图标或图片合并到一张大图中，然后通过CSS定位来显示需要显示的图片部分。
+
+原理：利用CSS的background-position属性来定位并显示大图中的特定部分。
+
+作用：
+减少网页的HTTP请求数量，因为所有小图标或图片都整合在一张大图中，只需要一次HTTP请求就可以加载。
+提高网页的加载速度和性能。
+方便进行样式调整和图片裁剪，因为所有图片都在一张大图中。
+
+2. 二、精灵图的使用方法
+制作精灵图：
+使用专业的图像编辑软件（如Photoshop）或精灵图制作工具（如TexturePacker）来合并多个小图标或图片成一张大图。
+在合并时，要确保每个小图标或图片之间有足够的间隙，避免在显示时出现重叠或模糊。
+
+在网页中使用精灵图：
+首先，将制作好的精灵图上传到网站的服务器或静态资源文件夹中。
+
+然后，在CSS中通过background-image属性设置元素的背景图片为精灵图。
+
+使用background-position属性来定位并显示精灵图中的特定部分。例如，如果要知道小图片左上角相对于精灵图左上角的偏移量，可以使用工具（如PxCook）进行测量，并将测量得到的负数坐标值设置为background-position属性的值（向左上移动图片位置）。
+
+注意事项：
+精灵图的大小要大于所有图片中最大的那个，以确保所有图片都能完整地显示在精灵图中。
+不要将一个像素的背景图片放在精灵图上，因为这可能会导致显示问题。
+如果需要更新精灵图的内容，应该使用精灵图的源文件进行修改，而不是直接修改png图片或配置文件。
+
+3. 三、实例演示
+假设有一个包含多个服务图标的精灵图，需要在网页上显示这些图标。可以使用以下CSS代码来实现：
+
+```
+css
+.service {  
+	/* 其他样式设置 */  
+}  
+  
+.service ul {  
+	display: flex;  
+}  
+  
+.service li {  
+	display: flex;  
+	/* 其他样式设置 */  
+}  
+  
+.service li h5 {  
+	width: 36px;  
+	height: 42px;  
+	background: url(./images/sprite.png) 0 -192px no-repeat; /* 精灵图路径和定位 */  
+}  
+  
+.service li:nth-child(2) h5 {  
+	background-position: -41px -192px; /* 第二个图标的定位 */  
+}  
+  
+.service li:nth-child(3) h5 {  
+	background-position: -82px -192px; /* 第三个图标的定位 */  
+}  
+  
+
+```
+## 属性选择器
+1. 存在选择器：
+
+语法：[attribute]
+
+选择所有具有指定属性的元素，不论其属性值为何。
+示例：[title]会选择所有具有title属性的元素。
+
+2. 完全匹配选择器：
+
+语法：[attribute="value"]
+
+选择属性值完全等于指定值的元素。
+
+示例：[href="https://www.example.com"]会选择href属性值完全等于https://www.example.com的元素。
+
+3. 开始匹配选择器：
+
+语法：[attribute^="value"]
+
+选择属性值以指定值开始的元素。
+
+示例：[href^="https://"]会选择href属性值以https://开始的元素。
+
+4. 结束匹配选择器：
+
+语法：[attribute$="value"]
+
+选择属性值以指定值结束的元素。
+
+示例：[href$=".pdf"]会选择href属性值以.pdf结束的元素。
+
+5. 包含匹配选择器：
+
+语法：[attribute*="value"]
+
+选择属性值包含指定字符串的元素。
+
+示例：[title*="hello"]会选择title属性值包含hello字符串的元素。
+
+6. 词匹配选择器：
+
+语法：[attribute~="value"]
+
+选择属性值中包含指定单词的元素，单词由空格分隔。
+示例：[class~="active"]会选择class属性值中包含active单词的元素。
+
+6. 前缀匹配选择器（主要用于语言代码或文档类型等属性）：
+
+语法：[attribute|="value"]
+
+选择属性值以指定值开始或者完全等于指定值的元素。
+## 效果图
+![alt text](image-3.png)
+![alt text](image-4.png)
diff --git "a/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1024-\345\212\250\347\224\273.md" "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1024-\345\212\250\347\224\273.md"
new file mode 100644
index 0000000..aff3d38
--- /dev/null
+++ "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1024-\345\212\250\347\224\273.md"
@@ -0,0 +1,111 @@
+# 动画
+## 过渡：transition
+ 可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
+
+ + transition 包括以下属性：
+
+1. transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
+1. transition-duration: 1s; 过渡的持续时间。
+1. transition-timing-function: linear; 运动曲线。属性值可以是：
+1. linear 线性
+1. ease 减速
+1. ease-in 加速
+1. ease-out 减速
+1. ease-in-out 先加速后减速
+1. transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
+
++ 综合属性：
+```
+transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+	transition: all 3s linear 0s;
+```
+如果设置 transition-property: width，意思是只让盒子的宽度在变化时进行过渡。
+
+## 2D 转换transform
+可以实现元素的位移、旋转、变形、缩放
+
+属性:
+1. 缩放：scale
+```html
+// x：表示水平方向的缩放倍数。y：表示垂直方向
+transform: scale(x, y); 的缩放倍数。
+
+//取值：大于1表示放大，小于1表示缩小。不能为百分比。
+transform: scale(2, 0.5);
+```
+2. 位移：translate
+```
+transform: translate(水平位移, 垂直位移);
+
+//参数为百分比，相对于自身移动。
+//正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+transform: translate(-50%, -50%);
+```
+
+这个属性还能用于水平垂直居中
+```html
+div {
+	    width: 600px;
+	    height: 60px;
+	    background-color: red;
+	    position: absolute;      // 绝对定位的盒子
+	    left: 50%;              // 首先，让左边线居中
+	    top: 0;
+	    transform: translate(-50%);    然后，利用translate，往左走自己宽度的一半【推荐写法】
+	}
+```
+3. 旋转：rotate
+```
+//transform: rotate(角度);
+transform: rotate(角度);
+
+transform: rotate(45deg);
+```
+
+## 3D转换
+1. 旋转：rotateX、rotateY、rotateZ
+```
+    transform: rotateX(360deg);    //绕 X 轴旋转360度
+    
+    transform: rotateY(360deg);    //绕 Y 轴旋转360度
+    
+    transform: rotateZ(360deg);    //绕 Z 轴旋转360度
+```
+2. 移动：translateX、translateY、translateZ
+```
+
+	transform: translateX(100px);    //沿着 X 轴移动
+
+	transform: translateY(360px);    //沿着 Y 轴移动
+
+	transform: translateZ(360px);    //沿着 Z 轴移动
+```
+
+## 动画@keyframes
+将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+
+定义动画
+```html
+@keyframes animationName {  
+  from {  
+    /* 初始样式 */  
+  }  
+  to {  
+    /* 结束样式 */  
+  }  
+  /* 或者使用百分比来定义中间的关键帧 */  
+  50% {  
+    /* 动画一半的样式 */  
+  }  
+}
+```
+#### 动画属性
+animation属性：
+
+       1.   animation: 定义的动画名称  持续时间  执行次数  是否反向 动曲线 延迟执行。(infinite 表示无限次)
+        2.  animation: move1 1s  alternate linear 3;
+        3.  animation: move2 4s;
+## 效果
+![alt text](image-5.png)
+![alt text](image-6.png)
+![alt text](image-7.png)
\ No newline at end of file
-- 
Gitee