From 6827a3b2463d94db7de8fca4cb143f35357ad71e Mon Sep 17 00:00:00 2001
From: qq_41923622 <qq_41923622@devide>
Date: Wed, 26 Mar 2025 21:15:00 +0800
Subject: [PATCH] Wed Mar 26 21:15:00 CST 2025 inscode

---
 index.html     |  18 ++++++-
 src/style.scss | 125 ++++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 114 insertions(+), 29 deletions(-)

diff --git a/index.html b/index.html
index 9a05498..94a7f02 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,21 @@
     </div>
     <div id="gift-card-animation-box">
         <div class="shuamozhihua">
-            <div class="shuamozhihua-title">棘祥杏福 情定终身</div>
+            <div class="shuamozhihua-title">
+                <div class="shuamozhihua-title-container" style="--n: 20">
+                    <div class="shuamozhihua-title-ring">
+                        <div class="shuamozhihua-title-item" style="--i: 0">棘</div>
+                        <div class="shuamozhihua-title-item" style="--i: 1">祥</div>
+                        <div class="shuamozhihua-title-item" style="--i: 2">杏</div>
+                        <div class="shuamozhihua-title-item" style="--i: 3">福</div>
+                        <div class="shuamozhihua-title-item" style="--i: 4"> </div>
+                        <div class="shuamozhihua-title-item" style="--i: 5">情</div>
+                        <div class="shuamozhihua-title-item" style="--i: 6">定</div>
+                        <div class="shuamozhihua-title-item" style="--i: 7">终</div>
+                        <div class="shuamozhihua-title-item" style="--i: 8">身</div>
+                    </div>
+                </div>
+            </div>
             <img class="shuamozhihua-img1" src="https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250322205303857-804953175.png" />
             <img class="shuamozhihua-img2" src="https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250322205245772-817504696.png" />
         </div>
@@ -210,7 +224,7 @@
                     <div class="gift-list-avatar"><img :src="item.avatar"/></div>
                     <div class="gift-list-content">
                         <div class="gift-list-avatar-name">
-                          <span>{{item.avatarName}}</span> 祝：
+                            <span>{{item.avatarName}}</span> 祝：
                         </div>
                         <span>
                             {{item.text}}
diff --git a/src/style.scss b/src/style.scss
index e1dbe90..7947222 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,5 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
-
+:root {
+  font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
+}
 /* cyrillic-ext */
 @font-face {
     font-family: 'Pacifico';
@@ -223,7 +225,7 @@ button:focus-visible {
             box-sizing: border-box;
             position: absolute;
             width: auto;
-            max-width: 70vw;
+            max-width: 85vw;
             min-height: 20px;
             text-align: left;
             margin-top: 2px;
@@ -346,35 +348,104 @@ button:focus-visible {
             // left: 50%;
             // top: 22vh;
             bottom: -100px;
-            width: 100px;
+            width: 96px;
             height: auto;
             animation-duration: 2s;
             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;
+        //     top: 50%;
+        //     left: 50%;
+        //     transform: translate(-50%, -50%);
+        //     opacity: 0;
+        //     // left: calc(50% - 160px);
+        //     // top: 14vh;
+        //     font-family: 'Sanjixinkai', 'Pacifico', 'cursive';
+        //     font-size: 32px;
+        //     background-color: rgba(255, 182, 193, 0.6);
+        //     backdrop-filter: blur(6px);
+        //     border: 3px solid transparent;
+        //     padding: 10px 20px;
+        //     border-radius: 50px;
+        //     animation: rotate 5s linear infinite;
+        //     backface-visibility: hidden;
+        //     color: #e74210;
+        //     text-shadow: 0 0 30px rgba(243, 221, 27, 0.836);
+        // }
         .shuamozhihua-title {
-            position: absolute;
-            width: auto;
-            height: auto;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            opacity: 0;
-            animation: fadeIn 1s 3s forwards;
-            // left: calc(50% - 160px);
-            // top: 14vh;
+            margin-top: 10vh;
             font-family: 'Sanjixinkai', 'Pacifico', 'cursive';
-            font-size: 32px;
-            background-color: rgba(255, 182, 193, 0.6);
-            backdrop-filter: blur(6px);
-            border: 3px solid transparent;
-            padding: 10px 20px;
-            border-radius: 50px;
-            animation: rotate 5s linear infinite;
-            backface-visibility: hidden;
+           
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            line-height: 1.5;
+            perspective: 40em;
             color: #e74210;
             text-shadow: 0 0 30px rgba(243, 221, 27, 0.836);
+            .shuamozhihua-title-container {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                margin: auto;
+                width: 100vw;
+                height: 30vh;
+                animation: tiltSpin 15s linear infinite;
+                transform-style: preserve-3d;
+                .shuamozhihua-title-ring {
+                    position: relative;
+                    height: 30vh;
+                    width: 100vw;
+                   font-size: 2em;
+                    transform-style: preserve-3d;
+                    animation-name: spin;
+                    animation-duration: 10s;
+                    animation-timing-function: inherit;
+                    animation-iteration-count: inherit;
+                }
+                .shuamozhihua-title-ring:nth-child(even) {
+                    animation-direction: reverse;
+                }
+
+                .shuamozhihua-title-item {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    display: inline-block;
+                    width: 100%;
+                    height: 100%;
+                    //  backdrop-filter: blur(2px);
+                    font-weight: 600;
+                    text-align: center;
+                      transform: rotateY(calc(var(--i) * calc(360 / var(--n)) * 1deg)) translateZ(7rem);
+                }
+            }
+
+            @keyframes tiltSpin {
+                from {
+                    transform: rotateY(0) rotateX(30deg);
+                }
+
+                to {
+                    transform: rotateY(1turn) rotateX(30deg);
+                }
+            }
+
+            @keyframes spin {
+                from {
+                    transform: rotateY(0);
+                }
+
+                to {
+                    transform: rotateY(1turn);
+                }
+            }
         }
 
         .shuamozhihua-img1 {
@@ -421,7 +492,7 @@ button:focus-visible {
 
     40% {
         bottom: 40%;
-        left: 55%;
+        left: 65%;
         transform: rotate(-30deg);
         filter: blur(2px);
     }
@@ -434,7 +505,7 @@ button:focus-visible {
     }
 
     80% {
-        bottom: 80%;
+        bottom: 70%;
         left: 45%;
         transform: rotate(-15deg);
         filter: blur(1px);
@@ -449,7 +520,7 @@ button:focus-visible {
 
     100% {
         bottom: 50%;
-        left: calc(50% - 120px);
+        left: calc(50% - 100px);
         transform: rotate(-15deg);
     }
 }
@@ -473,7 +544,7 @@ button:focus-visible {
 
     40% {
         bottom: 40%;
-        right: 55%;
+        right: 65%;
         transform: rotate(30deg);
         filter: blur(2px);
     }
@@ -486,7 +557,7 @@ button:focus-visible {
     }
 
     80% {
-        bottom: 80%;
+        bottom: 70%;
         right: 45%;
         transform: rotate(15deg);
         filter: blur(1px);
@@ -501,7 +572,7 @@ button:focus-visible {
 
     100% {
         bottom: 50%;
-        right: calc(50% - 80px);
+        right: calc(50% - 100px);
         transform: rotate(15deg);
     }
 }
-- 
GitLab