index.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;
  4. html, body, #root {
  5. height: 100%;
  6. margin: 0;
  7. background-color: #020617; /* 匹配你的 gray-950 背景色 */
  8. }
  9. body {
  10. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
  11. 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  12. sans-serif;
  13. -webkit-font-smoothing: antialiased;
  14. -moz-osx-font-smoothing: grayscale;
  15. }
  16. /* 科幻文字特效 */
  17. @keyframes text-glow {
  18. 0%, 100% {
  19. text-shadow:
  20. 0 0 10px rgba(16, 185, 129, 0.5),
  21. 0 0 20px rgba(16, 185, 129, 0.3),
  22. 0 0 30px rgba(16, 185, 129, 0.2),
  23. 0 0 40px rgba(6, 182, 212, 0.1);
  24. }
  25. 50% {
  26. text-shadow:
  27. 0 0 20px rgba(16, 185, 129, 0.8),
  28. 0 0 30px rgba(16, 185, 129, 0.6),
  29. 0 0 40px rgba(16, 185, 129, 0.4),
  30. 0 0 50px rgba(6, 182, 212, 0.3);
  31. }
  32. }
  33. @keyframes shimmer {
  34. 0% {
  35. background-position: -200% center;
  36. }
  37. 100% {
  38. background-position: 200% center;
  39. }
  40. }
  41. @keyframes pulse-glow {
  42. 0%, 100% {
  43. opacity: 1;
  44. filter: brightness(1) drop-shadow(0 0 10px rgba(16, 185, 129, 0.5));
  45. }
  46. 50% {
  47. opacity: 0.9;
  48. filter: brightness(1.2) drop-shadow(0 0 20px rgba(16, 185, 129, 0.8));
  49. }
  50. }
  51. @keyframes gradient-shift {
  52. 0% {
  53. background-position: 0% 50%;
  54. }
  55. 50% {
  56. background-position: 100% 50%;
  57. }
  58. 100% {
  59. background-position: 0% 50%;
  60. }
  61. }
  62. .text-glow {
  63. animation: text-glow 3s ease-in-out infinite;
  64. }
  65. .text-shimmer {
  66. background: linear-gradient(
  67. 90deg,
  68. rgba(16, 185, 129, 0.8) 0%,
  69. rgba(6, 182, 212, 1) 50%,
  70. rgba(16, 185, 129, 0.8) 100%
  71. );
  72. background-size: 200% auto;
  73. -webkit-background-clip: text;
  74. background-clip: text;
  75. -webkit-text-fill-color: transparent;
  76. animation: shimmer 3s linear infinite;
  77. }
  78. .text-pulse-glow {
  79. animation: pulse-glow 2s ease-in-out infinite;
  80. }
  81. .gradient-animated {
  82. background: linear-gradient(
  83. -45deg,
  84. #10b981,
  85. #06b6d4,
  86. #10b981,
  87. #34d399
  88. );
  89. background-size: 300% 300%;
  90. -webkit-background-clip: text;
  91. background-clip: text;
  92. -webkit-text-fill-color: transparent;
  93. animation: gradient-shift 4s ease infinite;
  94. }