Tue Mar 25 19:05:00 CST 2025 inscode

src/style.scss

@@ -334,21 +334,35 @@ button:focus-visible {
 
     .shuamozhihua {
         position: relative;
-
+        height: 100vh;
+        width: 100vw;
         img {
+            --d: 18px;  /* 深度 */
+             padding-block: var(--d);
+  outline: var(--d) solid #0008;
+  outline-offset: calc(-1 * var(--d));
             position: absolute;
+            // left: 50%;
+            // top: 22vh;
+            bottom: -100px;
             width: 100px;
             height: auto;
-            left: 50%;
-            top: 22vh;
+            animation-duration: 3s;
+            animation-fill-mode: forwards;
+            animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
         }
 
         .shuamozhihua-title {
             position: absolute;
             width: auto;
             height: auto;
-            left: calc(50% - 160px);
-            top: 14vh;
+             top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            animation: fadeIn 1s 3s forwards;
+            // left: calc(50% - 160px);
+            // top: 14vh;
             font-family: 'Sanjixinkai', 'Pacifico', 'cursive';
             font-size: 32px;
             background-color: rgba(255, 182, 193, 0.6);
@@ -362,12 +376,93 @@ button:focus-visible {
 
         .shuamozhihua-img1 {
             left: calc(50% - 120px);
-            transform: rotate(-15deg);
+             transform: rotate(-15deg);
+             animation-name: moveUpLeft;
         }
 
         .shuamozhihua-img2 {
-            left: calc(50% + 20px);
+            right: calc(50% - 80px);
             transform: rotate(15deg);
+            animation-name: moveUpRight;
         }
     }
-}
+}
\ No newline at end of file
+
+
+   
+            @keyframes moveUpLeftWrapper {
+            0% {
+                bottom: -100px;
+                left: 0;
+                transform: rotate3d(0, 0, 1, 0deg) translate3d(0, 0, -200px);
+            }
+            25% {
+                bottom: 25%;
+                left: 75%;
+                transform: rotate3d(0, 0, 1, 90deg) translate3d(0, 0, -100px);
+            }
+            50% {
+                bottom: 50%;
+                left: 25%;
+                transform: rotate3d(0, 0, 1, 180deg) translate3d(0, 0, -50px);
+            }
+            75% {
+                bottom: 75%;
+                left: 75%;
+                transform: rotate3d(0, 0, 1, 270deg) translate3d(0, 0, -25px);
+            }
+            95% {
+                bottom: 50%;
+                left: 50%;
+                transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 360deg);
+            }
+             100%{
+                 bottom: 50%;
+                 left: calc(50% - 120px);
+                 transform: rotate(-15deg);
+            }
+        }
+           
+   
+
+        @keyframes moveUpRight {
+            0% {
+                bottom: -100px;
+                right: 0;
+                transform: rotate3d(1, 1, 1, 720deg) translate3d(0, 0, -200px);
+            }
+            25% {
+                bottom: 25%;
+                right: 75%;
+                transform: rotate3d(1, 1, 1, 360deg) translate3d(0, 0, -100px);
+            }
+            50% {
+                bottom: 50%;
+                right: 25%;
+                transform: rotate3d(1, 1, 1, 180deg) translate3d(0, 0, -50px);
+            }
+            75% {
+                bottom: 75%;
+                right: 75%;
+                transform: rotate3d(1, 1, 1, 90deg) translate3d(0, 0, -25px);
+            }
+            95% {
+                bottom: 50%;
+                right: 50%;
+                transform: translate3d(50%, -50%, 0) rotate3d(1, 1, 1, 0deg);
+            }
+            100%{
+                 bottom: 50%;
+                 right: calc(50% - 80px);
+                transform: rotate(15deg);
+            }
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
\ No newline at end of file