如何使用CSS完成图片滤镜效果_filter与transition结合

P粉602998670 2025-11-22 00:00:00 次阅读

使用CSS的filter和transition属性可实现图片悬停时平滑应用滤镜效果。1. filter用于添加模糊、亮度、对比度等视觉效果，transition控制变化动画。2. 示例中图片默认灰度，悬停时恢复彩色并提亮，通过0.4秒缓动过渡。3. 可组合多种滤镜如sepia、contrast、saturate创建复古风格，并用cubic-bezier定制动画曲线。4. 建议避免过度使用blur以防性能问题，始终启用transition确保流畅，可结合transform增强交互，注意在移动端测试兼容性。该方法无需JavaScript，简洁高效，适用于图库或卡片设计。

想要让图片在鼠标悬停时平滑地应用滤镜效果，可以使用CSS的 filter 和 transition 属性结合实现。这种方式无需JavaScript，简洁高效，适用于图片美化、交互式图库或卡片式设计。

1. 基础语法：filter 与 transition 简介

filter 属性用于对元素（如图片）应用图形效果，比如模糊、亮度调整、对比度、饱和度等。常见值包括：

blur(5px) — 模糊
brightness(150%) — 提亮
contrast(200%) — 增加对比度
grayscale(100%) — 灰度
sepia(100%) — 褐色
saturate(200%) — 饱和度增强

transition 控制属性变化的动画过程，使滤镜切换更自然。

2. 实现鼠标悬停滤镜动画

以下是一个将图片变为灰度并提亮的悬停效果示例：

img {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

img:hover {
  filter: grayscale(0) brightness(120%);
}

说明：

初始状态：图片为全灰度
鼠标移上时：逐渐恢复彩色并提亮
transition 让 filter 的变化有0.4秒的缓动动画

3. 多重滤镜组合使用

你可以同时应用多个滤镜。例如创建一个复古风格效果：

img {
  filter: sepia(50%) contrast(120%);
  transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

img:hover {
  filter: sepia(100%) contrast(150%) saturate(180%);
}