mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-01 08:12:06 +00:00
47 lines
1.6 KiB
CSS
47 lines
1.6 KiB
CSS
/* ============================================================================
|
|
* Reduced Motion — 尊重用户的减少动效偏好
|
|
* 在 prefers-reduced-motion: reduce 时,禁用所有动画/视差/粒子
|
|
* ============================================================================ */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
/* 禁用所有动画与过渡 */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
/* 背景与动效元素直接显示/隐藏由组件自身处理,这里只保留全局兜底 */
|
|
|
|
/* animate-section 直接显示,不要等渐入 */
|
|
.animate-section {
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* hover 浮起效果也禁用(避免误触) */
|
|
:deep(.VPFeature):hover {
|
|
transform: none !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
* 移动端性能降级 — 关闭 backdrop-filter
|
|
* 原因:8+ 组件都用 blur(16-24px),Chrome 合成层 >10 时开始掉帧
|
|
* 移动端 60fps 体验优先于毛玻璃观感
|
|
* 注:亮色暗色共用此规则(物理层面 GPU 压力大)
|
|
* ============================================================================ */
|
|
@media (max-width: 768px) {
|
|
/* 所有毛玻璃效果用实色替代(避免 blur 引发的合成层) */
|
|
.sticky-cta-inner,
|
|
.section-nav {
|
|
backdrop-filter: none !important;
|
|
-webkit-backdrop-filter: none !important;
|
|
}
|
|
|
|
/* 移动端毛玻璃降级后,背景仅剩主渐变,无需额外隐藏 */
|
|
}
|