在css中transition与filter滤镜结合

transition 与 filter 结合可实现平滑视觉动画，如图片悬停变灰、模糊或亮度变化，通过 transition 定义滤镜过渡时长与缓动，配合 grayscale、blur、brightness 等属性提升交互体验，常用于图片悬停效果，建议优化性能并注意浏览器兼容性。

在CSS中，transition 与 filter 滤镜结合使用，可以实现非常平滑且视觉效果丰富的动画效果，比如图片悬停时变灰、变亮、模糊或旋转等。这种组合无需J*aScript，仅用几行CSS就能提升用户体验。

filter 可以为元素添加图形效果，常用于图片、背景或其它视觉元素：

直接改变 filter 属性会瞬间生效，加上 transition 才能实现渐变动画。transition 定义了属性变化的时长、缓动方式和延迟。

基本语法：

立即学习“前端免费学习笔记（深入）”；

img {
  filter: brightness(1);
  transition: filter 0.4s ease;
}

img:hover {
  filter: brightness(1.5);
}

当鼠标悬停时，亮度从1平滑过渡到1.5，持续0.4秒，使用 ease 缓动函数。

以下是一些常见的结合 transition 和 filter 的效果：

MGX

MetaGPT推出的自然语言编程工具

163 查看详情 MGX

1. 图片悬停去色 → 彩色

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

img:hover {
  filter: grayscale(0);
}

2. 模糊效果（常用于背景预览）

.card {
  filter: blur(0);
  transition: filter 0.3s;
}

.card:hover {
  filter: blur(2px);
}

3. 多个滤镜组合动画

img {
  filter: brightness(1) contrast(1);
  transition: filter 0.4s;
}

img:hover {
  filter: brightness(1.2) contrast(1.1) saturate(1.5);
}

注意：多个 filter 函数写在同一个 filter 属性中，transition 仍只需监听 filter 即可触发整体过渡。

虽然 transition + filter 效果出色，但需注意以下几点：

基本上就这些。合理使用 transition 与 filter 结合，能让网页交互更生动自然，又不至于过于花哨。关键在于控制动画节奏和选择合适的触发场景。

以上就是在css中transition与filter滤镜结合的详细内容，更多请关注其它相关文章！