diff --git a/src/pages/Login/index.css b/src/pages/Login/index.css index 211f240a..d395bbb6 100644 --- a/src/pages/Login/index.css +++ b/src/pages/Login/index.css @@ -3,7 +3,7 @@ display: flex; align-items: center; justify-content: center; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: linear-gradient(to bottom, #0f2027 0%, #203a43 50%, #2c5364 100%); position: relative; overflow: hidden; } @@ -17,54 +17,163 @@ overflow: hidden; } -.gradient-orb { +/* 星星样式 */ +.star { position: absolute; + background: white; border-radius: 50%; - filter: blur(80px); - opacity: 0.5; - animation: float 20s infinite ease-in-out; + animation: twinkle 3s infinite ease-in-out; } -.orb-1 { - width: 400px; - height: 400px; - background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); - top: -100px; +.star-1 { + width: 2px; + height: 2px; + top: 10%; + left: 20%; + animation-delay: 0s; +} + +.star-2 { + width: 3px; + height: 3px; + top: 20%; + left: 80%; + animation-delay: 0.5s; +} + +.star-3 { + width: 2px; + height: 2px; + top: 30%; + left: 10%; + animation-delay: 1s; +} + +.star-4 { + width: 4px; + height: 4px; + top: 15%; + left: 60%; + animation-delay: 1.5s; +} + +.star-5 { + width: 2px; + height: 2px; + top: 40%; + left: 90%; + animation-delay: 2s; +} + +.star-6 { + width: 3px; + height: 3px; + top: 60%; + left: 15%; + animation-delay: 0.3s; +} + +.star-7 { + width: 2px; + height: 2px; + top: 70%; + left: 70%; + animation-delay: 0.8s; +} + +.star-8 { + width: 3px; + height: 3px; + top: 80%; + left: 30%; + animation-delay: 1.2s; +} + +.star-9 { + width: 2px; + height: 2px; + top: 50%; + left: 50%; + animation-delay: 1.8s; +} + +.star-10 { + width: 4px; + height: 4px; + top: 25%; + left: 40%; + animation-delay: 2.5s; +} + +/* 月亮 */ +.moon { + position: absolute; + width: 80px; + height: 80px; + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + border-radius: 50%; + top: 10%; + right: 15%; + box-shadow: 0 0 40px rgba(245, 247, 250, 0.5); + animation: moonGlow 4s infinite ease-in-out; +} + +/* 流星 */ +.shooting-star { + position: absolute; + width: 100px; + height: 2px; + background: linear-gradient(90deg, transparent, white, transparent); + animation: shoot 3s infinite linear; + opacity: 0; +} + +.shooting-star-1 { + top: 20%; left: -100px; animation-delay: 0s; } -.orb-2 { - width: 300px; - height: 300px; - background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); - bottom: -50px; - right: -50px; - animation-delay: -5s; +.shooting-star-2 { + top: 40%; + left: -100px; + animation-delay: 1.5s; } -.orb-3 { - width: 250px; - height: 250px; - background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - animation-delay: -10s; -} - -@keyframes float { +@keyframes twinkle { 0%, 100% { - transform: translate(0, 0) scale(1); - } - 25% { - transform: translate(30px, -30px) scale(1.1); + opacity: 0.3; + transform: scale(1); } 50% { - transform: translate(-20px, 20px) scale(0.9); + opacity: 1; + transform: scale(1.2); } - 75% { - transform: translate(20px, 30px) scale(1.05); +} + +@keyframes moonGlow { + 0%, 100% { + box-shadow: 0 0 40px rgba(245, 247, 250, 0.5); + } + 50% { + box-shadow: 0 0 60px rgba(245, 247, 250, 0.8); + } +} + +@keyframes shoot { + 0% { + transform: translateX(0) translateY(0); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + transform: translateX(120vw) translateY(50px); + opacity: 0; } } @@ -72,8 +181,8 @@ width: 420px; padding: 40px; border-radius: 20px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(10px); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1); + backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.95); position: relative; z-index: 1; diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx index b22ac25e..f3f53836 100644 --- a/src/pages/Login/index.tsx +++ b/src/pages/Login/index.tsx @@ -30,9 +30,19 @@ const Login = () => { return (