动态 CSS 失效的一种可能原因
问题
最近遇到个很迷惑的问题，同一个静态前端网页在其他手机、电脑显示正常，但在我这台 Win10 机器上，彩虹流动的 CSS 动画完全不动，颜色渲染也有点怪，换了 3 个浏览器，结果都一样。
排查
在 AI 的帮助下，浏览器下按F12，并打开控制台，执行matchMedia('(prefers-reduced-motion: reduce)').matches，结果返回true。这意味着系统开启了“减少动态效果”，浏览器检测到后，会主动把动画禁用。
解决方法
Step 1
设置 → 轻松使用 → 显示 → 打开在 Windows 中显示动画
Step 2
控制面板 → 轻松使用 → 轻松使用中心 → 使计算机更易于查看 → 取消勾选关闭所有不必要的动画