怎样用纯CSS实现图片悬停从黑白到双色调渐变动画？-css教程-PHP中文网

纯css实现黑白到双色调悬停过渡需用可插值函数组合（如grayscale+saturation），显式声明transition: filter，加will-change优化性能，并注意移动端touch-action适配。

怎样用纯css实现图片悬停从黑白到双色调渐变动画？

用 `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 中。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

给图片加 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);
}