// 交互效果样式 // 全局交互动画变量 :root { --transition-fast: 0.15s ease-out; --transition-normal: 0.25s ease-out; --transition-slow: 0.35s ease-out; } // 卡片交互效果增强 .core-card { transition: all var(--transition-normal); &:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); } &:active { transform: translateY(0) scale(0.98); transition: all var(--transition-fast); } } // 按钮交互效果 .nav-btn, .view-toggle button, .add-shift-btn { transition: all var(--transition-normal); position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: width var(--transition-normal), height var(--transition-normal); } &:hover::before { width: 300px; height: 300px; } &:active { transform: scale(0.95); } } // 列表行交互效果 .list-row { transition: all var(--transition-normal); &:hover { background: rgba(0, 122, 255, 0.05); transform: translateX(4px); box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1); } } // 工作量圆环特殊效果 .workload-ring { transition: all var(--transition-normal); &:hover { transform: scale(1.05); filter: brightness(1.1); } } // 紧急任务卡片特殊效果 .urgent-task { position: relative; &::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255, 59, 48, 0.1) 50%, transparent 70%); opacity: 0; transition: opacity var(--transition-normal); } &:hover::after { opacity: 1; } } // 加载状态效果 .loading { position: relative; &::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: shimmer 1.5s infinite; } } @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } } // 成功状态动画 .success-state { animation: successPulse 0.6s ease-out; } @keyframes successPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } // 错误状态动画 .error-state { animation: errorShake 0.5s ease-out; } @keyframes errorShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } // 微交互反馈 .interactive-element { &:focus-visible { outline: 2px solid rgba(0, 122, 255, 0.6); outline-offset: 2px; } } // 减少动画偏好设置支持 @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }