如何在CSS中实现图片滤镜动画_通过CSS animation结合filter blur grayscale实现视觉效果-css教程-PHP中文网

如何在CSS中实现图片滤镜动画_通过CSS animation结合filter blur grayscale实现视觉效果

P粉602998670

发布： 2025-11-23 08:21:28

原创

351人浏览过

使用CSS animation结合filter属性可实现图片从模糊到清晰、黑白变彩色的平滑动画效果。1. 通过transition实现鼠标悬停时的简单过渡：.image:hover { filter: blur(0) grayscale(0); } 配合transition控制变化节奏。2. 使用@keyframes定义复杂动画，如“pulse-filter”在0%、50%、100%关键帧中设置不同blur和grayscale值，使图片在3秒内循环呈现由模糊灰度到清晰彩色的呼吸效果。3. 为提升性能，应限制blur值在1~5px内，避免过度渲染；通过transform: translateZ(0)或will-change: filter开启硬件加速；利用@supports检测浏览器支持情况并提供降级样式。4. 此技术适用于作品集悬停预览、加载占位图脉动、轮播图过渡等场景，只需将animation绑定类名，结合JavaScript触发即可实现交互式视觉效果。合理运用filter与animation，能在低代码成本下增强页面动态表现力。

如何在css中实现图片滤镜动画_通过css animation结合filter blur grayscale实现视觉效果

想让图片在页面上产生平滑的滤镜动画效果，比如从模糊到清晰、黑白变彩色，可以使用CSS的animation属性结合filter中的blur()和grayscale()来实现。这种方式无需JavaScript，性能良好，视觉表现力强。

1. 基本语法：使用 filter 和 animation

CSS filter 属性支持多种视觉效果，包括模糊（blur()）和灰度（grayscale()）。通过@keyframes定义关键帧动画，可以让这些滤镜值随时间变化。

示例：鼠标悬停时图片逐渐清晰并恢复色彩：

.image {
  filter: blur(5px) grayscale(100%);
  transition: filter 0.8s ease;
}

.image:hover {
  filter: blur(0) grayscale(0);
}

登录后复制

这段代码使用了transition实现简单过渡。但如果想要更复杂的节奏控制，比如循环呼吸效果，就需要animation。

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

2. 使用 @keyframes 创建滤镜动画

通过@keyframes可精确控制滤镜的变化过程。例如创建一个“脉动模糊”加“色彩呼吸”的动画：

ExcelFormulaBot

在AI帮助下将文本指令转换为Excel函数公式

129

查看详情

@keyframes pulse-filter {
  0% {
    filter: blur(4px) grayscale(100%);
  }
  50% {
    filter: blur(1px) grayscale(50%);
  }
  100% {
    filter: blur(0) grayscale(0);
  }
}

.animated-image {
  animation: pulse-filter 3s infinite ease-in-out;
}

登录后复制

这个动画会在3秒内循环播放，图片从严重模糊和全灰，逐步变为清晰彩色，再回退，形成柔和的视觉呼吸感。