| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- /* 全局样式 */
- body {
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
- background-color: #f8fafc;
- }
- /* 自定义动画 */
- @keyframes wave-h {
- 0%, 100% {
- opacity: 0.3;
- transform: translateX(-100%);
- }
- 50% {
- opacity: 1;
- transform: translateX(100%);
- }
- }
- @keyframes wave-v {
- 0%, 100% {
- opacity: 0.3;
- transform: translateY(-100%);
- }
- 50% {
- opacity: 1;
- transform: translateY(100%);
- }
- }
- /* 滚动条样式 */
- .scrollbar-hide::-webkit-scrollbar {
- display: none;
- }
- .scrollbar-hide {
- -ms-overflow-style: none;
- scrollbar-width: none;
- }
- /* 自定义工具类 */
- @layer utilities {
- .animate-in {
- animation-duration: 0.5s;
- animation-fill-mode: both;
- }
-
- .fade-in {
- animation-name: fadeIn;
- }
-
- .slide-in-from-top-2 {
- animation-name: slideInFromTop;
- }
-
- .zoom-in {
- animation-name: zoomIn;
- }
- }
- @keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
- @keyframes slideInFromTop {
- from {
- transform: translateY(-0.5rem);
- opacity: 0;
- }
- to {
- transform: translateY(0);
- opacity: 1;
- }
- }
- @keyframes zoomIn {
- from {
- transform: scale(0.95);
- opacity: 0;
- }
- to {
- transform: scale(1);
- opacity: 1;
- }
- }
- /* 移动端安全区域支持 */
- @layer utilities {
- .safe-pb {
- padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
- }
- }
|