| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- html, body, #root {
- height: 100%;
- margin: 0;
- background-color: #020617; /* 匹配你的 gray-950 背景色 */
- }
- body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- /* 科幻文字特效 */
- @keyframes text-glow {
- 0%, 100% {
- text-shadow:
- 0 0 10px rgba(16, 185, 129, 0.5),
- 0 0 20px rgba(16, 185, 129, 0.3),
- 0 0 30px rgba(16, 185, 129, 0.2),
- 0 0 40px rgba(6, 182, 212, 0.1);
- }
- 50% {
- text-shadow:
- 0 0 20px rgba(16, 185, 129, 0.8),
- 0 0 30px rgba(16, 185, 129, 0.6),
- 0 0 40px rgba(16, 185, 129, 0.4),
- 0 0 50px rgba(6, 182, 212, 0.3);
- }
- }
- @keyframes shimmer {
- 0% {
- background-position: -200% center;
- }
- 100% {
- background-position: 200% center;
- }
- }
- @keyframes pulse-glow {
- 0%, 100% {
- opacity: 1;
- filter: brightness(1) drop-shadow(0 0 10px rgba(16, 185, 129, 0.5));
- }
- 50% {
- opacity: 0.9;
- filter: brightness(1.2) drop-shadow(0 0 20px rgba(16, 185, 129, 0.8));
- }
- }
- @keyframes gradient-shift {
- 0% {
- background-position: 0% 50%;
- }
- 50% {
- background-position: 100% 50%;
- }
- 100% {
- background-position: 0% 50%;
- }
- }
- .text-glow {
- animation: text-glow 3s ease-in-out infinite;
- }
- .text-shimmer {
- background: linear-gradient(
- 90deg,
- rgba(16, 185, 129, 0.8) 0%,
- rgba(6, 182, 212, 1) 50%,
- rgba(16, 185, 129, 0.8) 100%
- );
- background-size: 200% auto;
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
- animation: shimmer 3s linear infinite;
- }
- .text-pulse-glow {
- animation: pulse-glow 2s ease-in-out infinite;
- }
- .gradient-animated {
- background: linear-gradient(
- -45deg,
- #10b981,
- #06b6d4,
- #10b981,
- #34d399
- );
- background-size: 300% 300%;
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: transparent;
- animation: gradient-shift 4s ease infinite;
- }
|