diff --git a/me.html b/me.html index 00b37b7..d189af5 100644 --- a/me.html +++ b/me.html @@ -65,46 +65,65 @@ font-size: 32px; letter-spacing: 8px; color: var(--loader-text); - margin-bottom: 20px; + margin-bottom: 30px; animation: breathe 3s infinite; } - .loader-ring { - width: 50px; - height: 50px; - border: 2px solid rgba(128, 128, 128, 0.2); - border-top-color: var(--accent-color); - border-radius: 50%; - animation: spin 1s linear infinite; - margin-bottom: 20px; + /* 加载容器样式 */ + .loading-container { + text-align: center; + min-height: 80px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .status-text { - font-size: 14px; + font-size: 16px; letter-spacing: 2px; color: var(--loader-text); - opacity: 0.8; - height: 20px; + opacity: 0.9; + height: 24px; + margin-bottom: 15px; + font-weight: 300; } - .perm-hint { - margin-top: 30px; - padding: 10px 20px; - border: 1px solid var(--accent-color); - border-radius: 20px; - font-size: 12px; - color: var(--loader-text); - opacity: 0; - transform: translateY(10px); - transition: all 1s; + /* 加载动画点 */ + .loading-dots { + display: flex; + justify-content: center; + align-items: center; } - .perm-hint.show { - opacity: 1; - transform: translateY(0); + .dot { + width: 8px; + height: 8px; + background-color: var(--accent-color); + border-radius: 50%; + margin: 0 4px; + animation: dot-pulse 1.5s infinite ease-in-out; + } + + .dot:nth-child(2) { + animation-delay: 0.2s; + } + + .dot:nth-child(3) { + animation-delay: 0.4s; + } + + @keyframes dot-pulse { + 0%, 60%, 100% { + transform: translateY(0); + opacity: 0.8; + } + 30% { + transform: translateY(-8px); + opacity: 1; + } } - /* 进入按钮样式 */ .enter-container { text-align: center; } @@ -338,12 +357,6 @@ } } - @keyframes spin { - to { - transform: rotate(360deg); - } - } - @keyframes gradientShift { 0% { background-position: 0% 50%; @@ -430,8 +443,14 @@