CSS动画与filter结合实现模糊效果，核心思路是利用@keyframes定义filter中blur函数的中间值，再将其应用到目标元素上，让元素在一段时间内从清晰变模糊或从模糊变清晰。这种方式性能较好，写法也直观。
基本实现方式
我们可以给一个盒子定义进入时的模糊到清晰的动画。下面的示例展示了元素加载后由模糊逐渐变清楚的过程。
/* 定义从模糊到清晰的动画 */
@keyframes blurIn {
from {
filter: blur(10px);
opacity: 0;
}
to {
filter: blur(0);
opacity: 1;
}
}
.box {
width: 200px;
height: 200px;
background: #4a90e2;
animation: blurIn 1.2s ease forwards;
}
悬停时的模糊动效
除了入场动画，也可以把模糊作为交互反馈。例如鼠标移入时元素轻微模糊，移出时恢复。
.card {
transition: filter 0.3s ease;
filter: blur(0);
}
.card:hover {
filter: blur(2px);
}
需要注意的问题
- filter模糊会创建新的层叠上下文，可能影响子元素的定位表现。
- 在低端设备上过大的blur半径可能造成卡顿，建议控制在合理范围。
- 若同时使用了transform动画，注意浏览器合成层的开销。
结合动画属性的完整示例
下面是一个使用HTML与CSS实现循环呼吸模糊效果的完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
@keyframes breathBlur {
0% { filter: blur(0); }
50% { filter: blur(6px); }
100% { filter: blur(0); }
}
.circle {
width: 120px;
height: 120px;
border-radius: 50%;
background: #f39c12;
margin: 40px auto;
animation: breathBlur 3s infinite;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
通过上述方法，开发者可以在不使用脚本的情况下，用CSS动画与filter稳定实现各类模糊过渡效果，提升页面的视觉柔和度与交互质感。