/* ═══════════════════════════════════════════════════════════════ micro-interactions.css — 微交互系统 版本: v1.0 | 2026-05-05 接入说明: 1. 在 base.html 的 中，于 main.css 之后引入: 2. 给元素添加对应 class 即可激活效果（详见下方注释） ═══════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────────── 1. 按钮微交互 class: .btn-ripple — 涟漪点击效果（需配合 JS 或伪元素） class: .btn-hover-lift — 悬停上浮 class: .btn-active-scale — 按下缩小 ──────────────────────────────────────────────────────────────── */ .btn-ripple { position: relative; overflow: hidden; transform: translateZ(0); } .btn-ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.25); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; opacity: 0; } .btn-ripple:active::after { width: 300%; height: 300%; opacity: 1; transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out; } /* 悬停上浮 + 阴影加深 */ .btn-hover-lift { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn-hover-lift:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(26, 46, 35, 0.12); } .btn-hover-lift:active { transform: translateY(-1px) scale(0.98); transition-duration: 0.1s; } /* 按下缩小 */ .btn-active-scale { transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .btn-active-scale:active { transform: scale(0.94); } /* ──────────────────────────────────────────────────────────────── 2. 角标微交互 class: .badge-pulse — 红色脉冲告警（用于磁盘>85%等告警） class: .badge-bounce — 新消息弹跳入场 class: .badge-glow — 呼吸光环（用于"今天"标记） ──────────────────────────────────────────────────────────────── */ @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(168, 80, 80, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(168, 80, 80, 0); } } .badge-pulse { animation: badgePulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes badgeBounce { 0% { transform: scale(0) translateY(-10px); opacity: 0; } 50% { transform: scale(1.2) translateY(2px); } 70% { transform: scale(0.9) translateY(-1px); } 100% { transform: scale(1) translateY(0); opacity: 1; } } .badge-bounce { animation: badgeBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes badgeGlow { 0%, 100% { box-shadow: 0 0 4px 1px rgba(45, 138, 94, 0.3), 0 0 12px 2px rgba(45, 138, 94, 0.15); } 50% { box-shadow: 0 0 8px 2px rgba(45, 138, 94, 0.5), 0 0 20px 4px rgba(45, 138, 94, 0.25); } } .badge-glow { animation: badgeGlow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; } /* ──────────────────────────────────────────────────────────────── 3. 加载骨架屏 shimmer 效果 class: .skeleton-shimmer — 用于数据加载中的占位块 ──────────────────────────────────────────────────────────────── */ @keyframes skeletonShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton-shimmer { background: linear-gradient( 90deg, var(--card-inner, rgba(248, 252, 250, 0.6)) 25%, rgba(255, 255, 255, 0.8) 50%, var(--card-inner, rgba(248, 252, 250, 0.6)) 75% ); background-size: 200% 100%; animation: skeletonShimmer 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; border-radius: var(--radius-sm, 12px); } html[data-theme="dark"] .skeleton-shimmer { background: linear-gradient( 90deg, rgba(30, 40, 34, 0.6) 25%, rgba(50, 64, 56, 0.5) 50%, rgba(30, 40, 34, 0.6) 75% ); background-size: 200% 100%; } /* ──────────────────────────────────────────────────────────────── 4. 空状态动画 class: .empty-bounce — 空数据时的图标弹跳 class: .empty-fade-up — 空状态文字淡入上浮 ──────────────────────────────────────────────────────────────── */ @keyframes emptyBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .empty-bounce { animation: emptyBounce 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes emptyFadeUp { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } } .empty-fade-up { animation: emptyFadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* ──────────────────────────────────────────────────────────────── 5. 进度条填充动画 class: .progress-fill-anim — 宽度从0%到目标值的平滑过渡 用法: 设置 --target-width CSS变量，JS动态赋值 ──────────────────────────────────────────────────────────────── */ @keyframes progressFill { 0% { width: 0%; } 100% { width: var(--target-width, 0%); } } .progress-fill-anim { animation: progressFill 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* 更平滑的进度条（使用 transition，推荐） */ .progress-fill-smooth { transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease; } /* ──────────────────────────────────────────────────────────────── 6. Tooltip 淡入淡出 class: .tooltip-fade — 通用 tooltip 动画 ──────────────────────────────────────────────────────────────── */ @keyframes tooltipIn { 0% { opacity: 0; transform: translateY(4px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .tooltip-fade { animation: tooltipIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* ──────────────────────────────────────────────────────────────── 7. 输入框聚焦光晕 class: .input-glow — 输入框聚焦时的绿色光晕 ──────────────────────────────────────────────────────────────── */ .input-glow { transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .input-glow:focus { outline: none; border-color: var(--green, #2d8a5e); box-shadow: 0 0 0 3px rgba(45, 138, 94, 0.15); } /* ──────────────────────────────────────────────────────────────── 8. 开关切换动画 class: .toggle-switch — 自定义开关的滑块动画 ──────────────────────────────────────────────────────────────── */ .toggle-switch { position: relative; width: 44px; height: 24px; background: var(--text3, #7a9a8a); border-radius: 999px; cursor: pointer; transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .toggle-switch.active { background: var(--green, #2d8a5e); } .toggle-switch.active::after { transform: translateX(20px); } /* ──────────────────────────────────────────────────────────────── 9. 卡片刷新/重载动画 class: .card-reload — 卡片数据刷新时的旋转指示器 ──────────────────────────────────────────────────────────────── */ @keyframes cardReload { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .card-reload::before { content: ''; position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border: 2px solid var(--green-border, rgba(45, 138, 94, 0.15)); border-top-color: var(--green, #2d8a5e); border-radius: 50%; animation: cardReload 0.8s linear infinite; } /* ──────────────────────────────────────────────────────────────── 10. 列表项滑入（用于动态加载的列表） class: .list-item-slide — 列表项依次滑入 ──────────────────────────────────────────────────────────────── */ @keyframes listItemSlide { 0% { opacity: 0; transform: translateX(-16px); } 100% { opacity: 1; transform: translateX(0); } } .list-item-slide { animation: listItemSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* 列表错开延迟（配合 JS 动态设置 animation-delay） */ .list-stagger > *:nth-child(1) { animation-delay: 0ms; } .list-stagger > *:nth-child(2) { animation-delay: 60ms; } .list-stagger > *:nth-child(3) { animation-delay: 120ms; } .list-stagger > *:nth-child(4) { animation-delay: 180ms; } .list-stagger > *:nth-child(5) { animation-delay: 240ms; } .list-stagger > *:nth-child(6) { animation-delay: 300ms; } /* ──────────────────────────────────────────────────────────────── 11. 脉冲圆点（在线状态指示器） class: .status-pulse — 绿色呼吸圆点 ──────────────────────────────────────────────────────────────── */ @keyframes statusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } } .status-pulse { display: inline-block; width: 8px; height: 8px; background: var(--green, #2d8a5e); border-radius: 50%; animation: statusPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } /* ──────────────────────────────────────────────────────────────── 12. 数字变化闪烁（数据更新时） class: .number-flash — 数字变化时的短暂高亮 ──────────────────────────────────────────────────────────────── */ @keyframes numberFlash { 0% { color: var(--green-light, #4aab7d); transform: scale(1.1); } 100% { color: inherit; transform: scale(1); } } .number-flash { animation: numberFlash 0.4s cubic-bezier(0.4, 0, 0.2, 1); }