纯CSS实现黑白到双色调悬停过渡需用可插值函数组合（如grayscale+saturation），显式声明transition: filter，加will-change优化性能，并注意移动端touch-action适配。
用 filter 实现黑白到双色调的悬停过渡必须加 transition
纯 CSS 实现这个效果的核心是组合 grayscale() 和 sepia()（或 hue-rotate() + saturate()），但直接写 filter: grayscale(1) sepia(1) 悬停时不会平滑过渡——因为浏览器不支持 filter 属性的跨函数插值。必须用同一组函数、只变参数值，才能触发 CSS 动画。
正确做法是只用 grayscale() 和 saturate() 两个可插值函数，通过控制灰度降级 + 饱和度拉升模拟“黑白 → 双色调”感：
-
grayscale(1)是全黑白，grayscale(0)是原色 -
saturate(2)或更高能让色彩更浓烈，配合低灰度就能出双色调倾向 - 必须显式声明
transition: filter 0.4s ease;，否则无动画 - 别忘了给图片设
display: block或清除浮动，否则filter在部分浏览器中可能失效
filter 动画卡顿？检查是否触发了 layout 或丢失 will-change
大量图片同时悬停时容易掉帧，不是代码写错，而是浏览器没做优化。CSS filter 默认会触发重绘（repaint），尤其在旧版 Chrome 或 Safari 中。
- 给图片加
will-change: filter;能提前提示浏览器提升图层，但别滥用——仅对悬停区域加，避免全局性能损耗 - 确保父容器没有
overflow: hidden且含transform: translateZ(0)类 hack，否则某些 Safari 版本会截断滤镜渲染区 - 如果用了
object-fit: cover，确认图片宽高比固定，否则缩放过程叠加filter易引发闪烁
想用 hue-rotate() 做真正双色调？得配 blur() 和 contrast() 手动调
单纯 hue-rotate(180deg) 只是色相翻转，离“双色调”（duotone）差很远。真要逼近设计稿里的双色调效果，得手动组合多个 filter 函数并精细调参：
立即学习“前端免费学习笔记（深入）”；
- 起点：先
grayscale(1) contrast(1.2)强化明暗层次 - 终点：加
hue-rotate(200deg) saturate(1.8) brightness(0.95)偏蓝紫调；若要偏橙青，改hue-rotate(30deg) - 所有函数顺序不能乱：
grayscale必须在最前，否则色相旋转后灰度会失真 - 参数值建议用小数（如
saturate(1.75)）而非整数，过渡更细腻
img {
filter: grayscale(1) contrast(1.2);
transition: filter 0.5s cubic-bezier(0.3, 0.8, 0.5, 1);
}
img:hover {
filter: grayscale(0.2) contrast(1.2) hue-rotate(200deg) saturate(1.75) brightness(0.95);
}
移动端点击无响应？补上 touch-action: manipulation
iOS Safari 和部分安卓浏览器默认把 :hover 延迟到 300ms 后触发，导致“点一下没反应”，实际是等伪 hover 状态。这不是 bug，是为双击缩放留的兼容逻辑。
- 给图片加
touch-action: manipulation;可关闭延迟，让悬停类立即响应触摸 - 如果项目已用
@media (hover: hover)做媒体查询隔离，这里不用额外处理 - 注意：加了这句后，双击缩放功能会失效，若需保留缩放，请改用 JS 监听
touchstart手动 toggle class
双色调的“色调”本身没有标准定义，CSS 里也没有 duotone() 函数——所有效果都是靠人眼对多层 filter 参数的感知拼出来的。调参时盯着真实设备看，比在 DevTools 里拖滑块靠谱得多。
