通过CSS的filter与transition结合，可实现图片从黑白到彩色、亮度调整等动态视觉效果。默认设置如grayscale(100%)，悬停时变为grayscale(0%)，配合transition实现0.5秒平滑过渡。支持brightness、contrast、saturate、blur等函数动画，多个滤镜可组合过渡，如brightness(0.8) contrast(120%) saturate(50%)到全值变化，使用cubic-bezier控制缓动，注意兼容性与性能即可。
想让图片的视觉效果动态变化，比如从黑白变成彩色、亮度调整或添加阴影，可以用 CSS 的 filter 与 transition 结合实现平滑过渡。虽然 filter 属性本身不是传统意义上的数值属性（如 width 或 opacity），但现代浏览器支持对它进行过渡动画。
基本原理：filter + transition
filter 用于给元素添加图形效果，比如模糊、对比度、饱和度等。将它和 transition 配合使用，可以在状态变化时（如 hover）实现渐变动画。
关键点：
- 给图片设置默认的
filter状态 - 通过伪类（如
:hover）改变filter值 - 使用
transition定义过渡时间和缓动函数
常见 filter 函数与可动画性
以下 filter 函数支持过渡动画：
立即学习“前端免费学习笔记（深入）”；
-
brightness()：控制明暗 -
contrast()：调整对比度 -
saturate()：饱和度 -
blur()：模糊程度 -
grayscale()：灰度 -
sepia()：褐色滤镜 -
hue-rotate()：色相旋转
这些函数接收数值参数，因此可以被浏览器插值计算，从而实现过渡。
示例：鼠标悬停时移除黑白滤镜
img {
filter: grayscale(100%); /* 默认黑白 */
transition: filter 0.5s ease;
}
img:hover {
filter: grayscale(0%); / 恢复彩色 /
}
当鼠标移到图片上时，图像会从完全灰度逐渐恢复为原始色彩，过程平滑自然。
组合多个滤镜并过渡
你也可以同时使用多个 filter 效果，并在 hover 时整体过渡：
img {
filter: brightness(0.8) contrast(120%) saturate(50%);
transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
img:hover {
filter: brightness(1) contrast(100%) saturate(100%);
}
这种写法适合营造更丰富的视觉反馈，比如让图片“亮起来”并恢复鲜艳。
基本上就这些。只要注意浏览器兼容性和不要过度使用复杂滤镜（可能影响性能），用 filter 和 transition 实现图片特效过渡非常直接有效。
