css transition与filter组合使用效果-css教程-PHP中文网

css transition与filter组合使用效果

P粉602998670

发布： 2025-10-02 23:44:02

原创

417人浏览过

transition与filter结合可实现平滑视觉效果，如图片悬停模糊、黑白转彩色、亮度调节等，通过控制动画过程与图形效果提升交互体验，但需注意性能优化，避免过度使用导致卡顿。

css transition与filter组合使用效果

CSS 的 transition 与 filter 组合使用，可以实现非常平滑且视觉吸引力强的图像或元素效果，比如图片悬停模糊、亮度变化、对比度调整等。这种组合在不依赖 JavaScript 的情况下，就能增强用户交互体验。

transition 控制属性变化时的动画过程，包括持续时间、缓动函数和延迟。而 filter 可以为元素添加图形效果，如模糊、灰度、饱和度、亮度、阴影等。

当两者结合时，filter 的值在状态变化（如 hover）中不再是突变，而是通过 transition 平滑过渡。

图片悬停模糊淡出

鼠标移上时图片逐渐模糊，移开后恢复清晰：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

img {
  filter: blur(0);
  transition: filter 0.4s ease;
}
img:hover {
  filter: blur(5px);
}

登录后复制

黑白图转彩色

默认显示为黑白图像，悬停时恢复彩色：

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

登录后复制

亮度调节营造按钮感

让图片或容器像按钮一样“亮起”：

.card {
  filter: brightness(80%);
  transition: filter 0.3s;
}
.card:hover {
  filter: brightness(100%);
}

登录后复制

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

基本上就这些。合理使用 transition 和 filter 的组合，能让界面更生动，关键在于平衡视觉效果与性能表现。

以上就是css transition与filter组合使用效果的详细内容，更多请关注php中文网其它相关文章！

大家都在看：