纯css实现图片悬停黑白→彩色过渡最直接方法是结合filter: grayscale(1)与transition，需将transition声明在默认状态而非:hover中，且注意兼容性、性能及链式filter写法规范。
图片悬停变色用 filter: grayscale() 最直接
不用 JS，纯 CSS 就能实现黑白→彩色过渡，核心就是 filter 的 grayscale() 和 transition 配合。默认设为 grayscale(1)（全灰），悬停时设为 grayscale(0)（原色），浏览器会自动插值过渡。
常见错误是只写 filter: grayscale(1) 却漏掉 transition 声明，结果变色生硬或无动画；或者把 transition 写在伪类里（如 :hover 中），导致进/出效果不一致。
- 必须把
transition写在默认状态（非:hover）上，例如：img { filter: grayscale(1); transition: filter 0.3s ease; } -
grayscale()取值范围是0（彩色）到1（全灰），也支持百分比（100%等价于1） - 别用
filter: url(#svg-filter)或 SVG 滤镜替代——兼容性差，且无法和transition联动
transition 不生效？检查是否触发了重排或被覆盖
如果加了 transition 却没动画，大概率是属性没被“可过渡”识别，或样式被其他规则覆盖。CSS 中只有部分属性支持过渡，filter 是其中之一，但前提是它没被 !important、内联样式或更高优先级选择器强行锁定。
- 用浏览器开发者工具检查元素计算后的
filter值：悬停前后是否真从grayscale(1)→grayscale(0)？如果不是，说明样式没生效 - 避免在父容器上设置
overflow: hidden同时又对子图做filter动画——某些旧版 Safari 会禁用硬件加速，导致卡顿或跳变 - 不要混用
transform和filter过渡在同一个元素上却不声明will-change: transform, filter，尤其在滚动区域中，可能触发渲染异常
兼容性与性能：IE 不支持，移动端需留意闪屏
filter 在 IE 完全不支持（包括 IE11），Edge 16+ 开始支持；iOS Safari 9.3+、Android Chrome 53+ 均可用。但 iOS 12–14 上曾有 grayscale 过渡闪白帧的问题，本质是滤镜缓存未命中。
- 加
backface-visibility: hidden或transform: translateZ(0)可强制启用 GPU 加速，缓解闪屏 - 若需兼容 IE，只能降级为两张图切换（
background-image+:hover），但会多一次图片请求，且无法平滑过渡 - 慎用高分辨率图 +
filter动画——部分低端 Android 设备会出现掉帧，建议图片宽度控制在 1200px 以内
想叠加其他效果？filter 函数可链式组合
filter 支持多个函数连写，比如同时做灰度 + 模糊 + 亮度调整：filter: grayscale(1) blur(2px) brightness(0.8)。悬停时只需改变其中某一项，其余保持不变。
但注意：所有函数按顺序执行，且过渡只对“变化的函数”生效。例如你只改 grayscale()，那 blur() 和 brightness() 就不会动。
- 链式写法中不要换行或空格不一致，否则部分浏览器解析失败（推荐写成单行：
filter: grayscale(1) contrast(0.9);） - 避免用
hue-rotate()替代grayscale()实现“去色”，它不是线性去饱和，效果不可控 - 调试时可用
filter: none快速清空所有滤镜，比逐个设回默认值更可靠
ease 太慢热，linear 又太机械，cubic-bezier(0.25, 0.46, 0.45, 0.94) 这类轻微弹性曲线往往更自然，但多数人直接抄默认值就不再调了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
