为什么需要这个功能
部分用户因前庭功能障碍、光敏性癫痫或单纯不喜欢动效，会在操作系统中开启「减少动态效果」选项。macOS 在「辅助功能 → 显示」中、Windows 在「设置 → 辅助功能 → 视觉效果」中均提供此开关。
作为网站开发者，响应这个偏好不仅是无障碍的基本要求，也体现了对用户尊严的尊重。
核心 CSS 实现
使用 @media (prefers-reduced-motion: reduce) 媒体查询全局覆盖动画：
1@media (prefers-reduced-motion: reduce) {
2 *,
3 *::before,
4 *::after {
5 animation-duration: 0.01ms !important;
6 animation-iteration-count: 1 !important;
7 transition-duration: 0.01ms !important;
8 scroll-behavior: auto !important;
9 }
10}
将动画时间设为 0.01ms 而非 0s，是因为某些动画库依赖 animationend 事件，设为 0s 可能导致事件不触发，从而引发 JS 逻辑异常。
针对性处理
打字光标闪烁
闪烁效果对部分用户可能引起不适，需要关闭：
1@media (prefers-reduced-motion: reduce) {
2 .typeit-cursor,
3 .typing-cursor {
4 animation: none !important;
5 opacity: 1;
6 }
7}
粒子特效隐藏
Banner 区域的粒子动画属于纯装饰性动效，直接隐藏：
1@media (prefers-reduced-motion: reduce) {
2 #particles-js,
3 .particles-container {
4 display: none !important;
5 }
6}
平滑滚动禁用
scroll-behavior: smooth 会产生持续性的滚动动画，需要关闭：
1@media (prefers-reduced-motion: reduce) {
2 html {
3 scroll-behavior: auto !important;
4 }
5}
JavaScript 层面检测
如果需要根据用户偏好动态调整逻辑，可在 JS 中检测：
1const prefersReducedMotion = window.matchMedia(
2 '(prefers-reduced-motion: reduce)'
3);
4
5function handleMotionPreference(e) {
6 if (e.matches) {
7 document.documentElement.classList.add('reduced-motion');
8 } else {
9 document.documentElement.classList.remove('reduced-motion');
10 }
11}
12
13prefersReducedMotion.addEventListener('change', handleMotionPreference);
14handleMotionPreference(prefersReducedMotion);
通过给 <html> 添加 .reduced-motion 类，可以在 CSS 和 JS 中统一判断当前偏好状态。
设计建议
在实现本功能时，需要注意以下几点：
- 保留功能性动画：如加载指示器、进度条等传达信息状态的动画应该保留
- 静态替代方案：当动画被禁用时，确保所有内容依然可读可访问
- 过渡而非消失：如果某个 UI 元素依赖动画展示，提供静态展示作为回退
- 测试覆盖：在系统设置中开启减少动态效果后，遍历站点所有页面验证效果
这项改动代码量很小，但对特定用户群体的体验改善是巨大的。花几分钟添加这个媒体查询，可能是你为无障碍做的最有性价比的一件事。
留言评论
期待你的想法评论加载中