index.css 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;
  4. /* 全局样式 */
  5. body {
  6. font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  7. background-color: #f8fafc;
  8. }
  9. /* 自定义动画 */
  10. @keyframes wave-h {
  11. 0%, 100% {
  12. opacity: 0.3;
  13. transform: translateX(-100%);
  14. }
  15. 50% {
  16. opacity: 1;
  17. transform: translateX(100%);
  18. }
  19. }
  20. @keyframes wave-v {
  21. 0%, 100% {
  22. opacity: 0.3;
  23. transform: translateY(-100%);
  24. }
  25. 50% {
  26. opacity: 1;
  27. transform: translateY(100%);
  28. }
  29. }
  30. /* 滚动条样式 */
  31. .scrollbar-hide::-webkit-scrollbar {
  32. display: none;
  33. }
  34. .scrollbar-hide {
  35. -ms-overflow-style: none;
  36. scrollbar-width: none;
  37. }
  38. /* 自定义工具类 */
  39. @layer utilities {
  40. .animate-in {
  41. animation-duration: 0.5s;
  42. animation-fill-mode: both;
  43. }
  44. .fade-in {
  45. animation-name: fadeIn;
  46. }
  47. .slide-in-from-top-2 {
  48. animation-name: slideInFromTop;
  49. }
  50. .zoom-in {
  51. animation-name: zoomIn;
  52. }
  53. }
  54. @keyframes fadeIn {
  55. from {
  56. opacity: 0;
  57. }
  58. to {
  59. opacity: 1;
  60. }
  61. }
  62. @keyframes slideInFromTop {
  63. from {
  64. transform: translateY(-0.5rem);
  65. opacity: 0;
  66. }
  67. to {
  68. transform: translateY(0);
  69. opacity: 1;
  70. }
  71. }
  72. @keyframes zoomIn {
  73. from {
  74. transform: scale(0.95);
  75. opacity: 0;
  76. }
  77. to {
  78. transform: scale(1);
  79. opacity: 1;
  80. }
  81. }
  82. /* 移动端安全区域支持 */
  83. @layer utilities {
  84. .safe-pb {
  85. padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  86. }
  87. }