模糊聚焦

模糊到清晰

实时预览

Blur Focus

代码

css

.img-blur{width:200px;height:140px;border-radius:10px;overflow:hidden;cursor:pointer}
.img-blur-inner{width:100%;height:100%;background:linear-gradient(135deg,#f093fb,#f5576c);filter:blur(4px);transition:filter .6s;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}
.img-blur:hover .img-blur-inner{filter:blur(0)}

纯 CSS 实现的模糊聚焦图片动画——通过滤镜、变换和遮罩让图片在悬停或滚动时产生视觉效果。适用于商品图、相册、文章插图等场景。

快速使用

复制 CSS 代码到你的样式文件中
在图片外层包裹一个带 overflow: hidden 的容器
给图片添加对应的 class 名称
调整缩放比例、模糊半径等参数

使用场景

商品图/相册：悬停缩放让用户看清细节，模糊切换增加浏览趣味
文章插图：视差滚动让图片和文字有不同的滚动层次
用户头像：灰度到彩色的过渡展示在线/离线状态或会员身份
卡片封面图：遮罩揭示或倾斜让静态封面有动态交互感

常见问题

Q: 图片缩放动画会影响图片清晰度吗？ A: transform: scale() 在合成层执行，图片先以原始分辨率渲染再缩放——放大时可能出现轻微模糊。建议初始加载比容器稍大的图片，缩放时只做缩小操作。或者用 image-rendering 优化。

Q: 如何让图片懒加载配合动画？ A: 使用 loading="lazy" 原生懒加载。图片加载完成前可以用 CSS 骨架屏或模糊占位（filter: blur(20px)），加载完成后添加 .loaded 类触发 blur→0 过渡。

Q: 滤镜动画（grayscale/blur）的性能如何？ A: filter 由 GPU 处理，性能较好。但 blur() 半径越大，GPU 开销越大。建议 blur 半径不超过 20px，并且在动画完成后移除/简化 filter。IE 不支持 filter，需降级。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持
Firefox	✅ 完全支持
Safari	✅ 完全支持（注意 filter 性能）
移动端浏览器	✅ 完全支持
IE 11	❌ filter 和高级 transform 不支持

模糊聚焦 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

📎 相关动画推荐