用css filter配合:hover可实现图片悬停由模糊变清晰，核心是blur()值从非零过渡到0，并用transition控制动画；示例中设初始blur(4px)、悬停blur(0)，搭配cubic-bezier优化缓动，建议包裹容器并考虑兼容性与性能优化。
用CSS的filter属性配合:hover伪类就能实现图片悬停时由模糊变清晰的效果，核心是控制高斯模糊（blur()）值从大到0的过渡。
基础实现方法
给图片设置初始模糊，再在悬停时移除模糊，并添加过渡动画让变化更自然：
- 默认状态设
filter: blur(5px)（数值越大越模糊） - 悬停状态设
filter: blur(0)（完全清晰） - 用
transition: filter 0.3s ease让模糊度平滑变化
完整HTML+CSS示例
直接复制即可使用：
@@##@@
<style>
.blur-hover {
filter: blur(4px);
transition: filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.blur-hover:hover {
filter: blur(0);
}
</style>
其中cubic-bezier可替换成ease或linear，按需调整流畅感。
增强细节建议
让效果更稳妥、兼容性更好：
- 为避免文字或边框也受滤镜影响，把图片包在容器里，对容器设
overflow: hidden - 旧版Safari需加
-webkit-filter前缀（现代浏览器已基本不需要） - 若图片有透明背景或需要保留阴影，注意
filter会影响整个元素渲染层，必要时用will-change: filter优化性能
进阶：配合其他效果一起触发
比如悬停时同时放大+去模糊+加阴影，只需合并写法：
.blur-hover {
filter: blur(6px);
transform: scale(1);
transition: all 0.35s ease;
}
.blur-hover:hover {
filter: blur(0);
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
