diff --git "a/\350\224\241\345\234\243\346\201\251/20241028\345\212\250\347\224\273.md" "b/\350\224\241\345\234\243\346\201\251/20241028\345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..88701246726aee56ce4e79d6314589272a77c1e4
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/20241028\345\212\250\347\224\273.md"
@@ -0,0 +1,142 @@
+# 效果图
+
+<img src="https://pic.imgdb.cn/item/672770c8d29ded1a8c9a6124.gif" alt="GIF 2024-11-3 18-54-26.gif">
+
+# 代码
+```html
+<!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: 2000px;
+            height: 200px;
+            background-color: #6fd6f2;
+        }
+        .d2{
+            width: 200px;
+            height: 100px;
+            background-image: url(./白熊.png);
+            animation: bear1 1s  steps(8) infinite,bear2 8s ;
+        }
+        @keyframes bear1 {
+            from{
+                background-position: 0 0;
+            }
+            to{
+                background-position: -1600px 0;
+            }
+        }
+        @keyframes bear2 {
+            from{
+                transform: translate(0,0);
+            }
+            to{
+                transform: translate(1000px,0);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">
+        <div class="d2"></div>
+    </div>
+</body>
+</html>
+
+```
+
+# 代码
+```html
+<!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>
+        .sharkbox {
+            width: 174px;
+            height: 126px;
+            background: url(./fish.png) no-repeat;
+            animation: fish 1s steps(8) infinite,fishBox 20s;
+        }
+
+        .shark{
+            background-image: url(./shark2.png);
+            width: 509px;
+            height: 270px;
+            margin-top: 200px;
+            animation: move 1s steps(8) infinite,sharkBox 20s;
+        }
+        @keyframes fish {
+            from {
+                background-position: 0 0;
+            }
+
+            to {
+                background-position: 0px -1008px;
+            }
+        }
+
+        @keyframes fishBox {
+            0% {
+                transform: translate(0, 0);
+            }
+
+            25% {
+                transform: translate(600px, 0px) rotate(90deg);
+            }
+
+            50% {
+                transform: translate(600px, 600px) rotate(180deg);
+            }
+
+            75% {
+                transform: translate(0px, 600px) rotate(270deg);
+            }
+
+            100% {
+                transform: translate(0px, 0px) rotate(360deg);
+            }
+        }
+
+        @keyframes move{
+            from{
+                transform: translate(0px,0px);
+            }
+            to{
+                background-position:left -2160px;
+            }
+        }
+        @keyframes shark {
+            from {
+                background-position: 0 0;
+            }
+
+            to {
+                background-position: 0px -2160px;
+            }
+        }
+
+        @keyframes sharkBox {
+            from {
+                transform: translate(0, 0);
+            }
+
+            to {
+                transform: translate(500px, 0px);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="sharkbox">
+        <div class="shark"></div>
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
