CSS怎样制作图片模糊聚焦效果？filter模糊过渡动画-css教程-PHP中文网

CSS怎样制作图片模糊聚焦效果？filter模糊过渡动画

蓮花仙者

发布： 2025-08-08 11:23:01

原创

1033人浏览过

除了鼠标悬停，还可通过1. 点击事件（javascript监听click并切换类名）、2. 页面滚动（结合intersection observer api检测视口进入）、3. 表单控件状态（利用:checked配合css选择器）来触发图片模糊聚焦效果；这些方法扩展了交互场景，使图片在用户点击、滚动至指定区域或切换选项时从模糊变清晰，提升动态体验。

CSS怎样制作图片模糊聚焦效果？filter模糊过渡动画

CSS要制作图片模糊聚焦效果，核心思路就是利用

filter

登录后复制

属性来控制模糊程度，再结合

transition

登录后复制

属性让这个变化平滑过渡。当鼠标悬停时，模糊效果消失，图片显得清晰，移开则恢复模糊。这其实是个很经典的交互小技巧，既能吸引眼球，又不会显得过于突兀。

<div class="image-wrapper">
    <img src="your-image.jpg" alt="风景图片，最初是模糊的" class="blur-on-hover">
    <!-- 也可以在这里放一些文字，让它们在图片清晰时显得更突出 -->
</div>

登录后复制

.image-wrapper {
    /* 容器可以设置溢出隐藏，确保图片放大时不会影响布局 */
    overflow: hidden;
    display: inline-block; /* 或者 block，根据你的布局需求 */
    max-width: 100%; /* 确保图片容器响应式 */
    position: relative; /* 如果有 overlay 或其他定位元素 */
}

.blur-on-hover {
    width: 100%; /* 图片宽度填充容器 */
    height: auto; /* 保持图片比例 */
    display: block; /* 避免图片底部的小间隙 */

    /* 初始模糊效果 */
    filter: blur(8px); /* 初始模糊度，你可以调整这个值 */
    transform: scale(1); /* 初始缩放，可以配合hover做放大效果 */

    /* 关键：平滑过渡所有变化，特别是filter */
    transition: filter 0.4s ease-out, transform 0.4s ease-out; /* 0.4秒的过渡时间，可以根据喜好调整 */

    /* 优化性能，告诉浏览器这个属性会变化，提前准备 */
    will-change: filter, transform;
}

.blur-on-hover:hover {
    /* 鼠标悬停时，移除模糊 */
    filter: blur(0);
    /* 悬停时稍微放大，增加交互感 */
    transform: scale(1.05);
}

/* 考虑一下，如果图片上有文字，它们在图片模糊时也应该清晰 */
/* 可以将文字放在图片上方的另一个 div 中，或者使用 backdrop-filter */
/* 但对于简单的模糊聚焦，直接对图片操作是最直接的 */

登录后复制

除了鼠标悬停，还有哪些方式可以触发图片模糊聚焦效果？

鼠标悬停无疑是最直观、最常用的触发方式，但实际应用中，我们可能会遇到各种各样的交互场景，需要更灵活的触发机制。比如，用户点击一个按钮，或者页面滚动到某个区域时，图片才逐渐清晰。

一种常见的替代方案是利用 JavaScript 来控制。我们可以通过监听各种DOM事件，比如

click

登录后复制

、

scroll

登录后复制

，甚至更复杂的如

Intersection Observer API

登录后复制

来判断元素是否进入视口。当事件触发时，我们不是直接修改CSS伪类，而是通过JavaScript来动态地给图片元素添加或移除一个特定的CSS类。

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

举个例子，我们可以定义一个

.focused

登录后复制

类，里面包含

filter: blur(0);

登录后复制

和

transform: scale(1.05);

登录后复制

。然后，在JavaScript中，当用户点击图片时，就用

element.classList.toggle('focused');

登录后复制

来切换这个类。这样，CSS的

transition

登录后复制

属性依然会负责平滑的过渡效果，而JavaScript则充当了事件的“调度员”。

另外，对于一些复杂的表单或交互界面，我们甚至可以利用

<input type="checkbox">

登录后复制

或
<input type="radio">
登录后复制
的
checked
登录后复制
状态结合CSS选择器（如

登录后复制

或

登录后复制

）来间接控制元素的样式。这在纯CSS实现一些高级交互时非常有用，尽管对于图片模糊聚焦可能显得有些“大材小用”，但它确实提供了一种无需JavaScript的替代方案。

思考一下，当你滚动到页面某个部分，图片突然从模糊变得清晰，那种“发现”的惊喜感，是纯粹的

hover

登录后复制

无法比拟的。这背后，往往就是JavaScript和

Intersection Observer

登录后复制

在默默工作。

图片模糊聚焦效果对网页性能有何影响？如何优化？

关于性能，

filter

登录后复制

属性，尤其是

blur()

登录后复制

，在CSS中算是一个比较“重”的属性。它要求浏览器对图片像素进行大量的计算和重新绘制。虽然现代浏览器大多会利用GPU来加速

filter

登录后复制

的渲染，但如果页面上存在大量使用

filter

登录后复制

的元素，或者频繁地改变

filter

登录后复制

值，仍然可能导致性能瓶颈，表现为动画卡顿、页面响应变慢，甚至在低端设备上出现明显的掉帧。

可图大模型

可图大模型（Kolors）是快手大模型团队自研打造的文生图AI大模型

查看详情

主要的影响点在于：

重绘 (Repaint)： 每次
```
filter
```
登录后复制
值改变，浏览器都需要重新计算并绘制受影响的像素。
GPU资源消耗： 即使有GPU加速，过多的计算也会占用GPU资源，影响其他动画或渲染任务。
内存占用： 某些复杂的
```
filter
```
登录后复制
操作可能需要更多的内存来存储中间计算结果。

那么，如何优化呢？

首先，最直接的优化就是合理设置模糊半径。没必要设置一个极高的模糊值，只要能达到视觉效果即可。较小的模糊半径意味着较少的像素计算。

其次，利用好CSS的

will-change

登录后复制

属性。就像上面代码中展示的

will-change: filter, transform;

登录后复制

。这个属性是给浏览器一个“提示”，告诉它在不久的将来，这些属性会发生变化。浏览器收到这个提示后，可能会提前进行一些优化，比如为这些属性分配独立的合成层（composited layer），从而减少主线程的负担，让动画更流畅。但要注意，

will-change

登录后复制

不能滥用，只应用于确实会频繁变化的属性，否则反而可能增加内存消耗。

另外，优化图片本身也很重要。使用适当尺寸和压缩的图片，可以从源头上减轻浏览器的处理负担。如果图片本身就很大，即使模糊处理后，其原始数据量依然存在。

最后，如果你的模糊聚焦效果是在一个非常复杂的页面上，并且性能问题依然突出，你可能需要考虑一些更高级的技巧，比如：

使用SVG滤镜： SVG的
```
<filter>
```
登录后复制
元素提供了更强大的图像处理能力，但学习曲线较陡峭，且浏览器兼容性可能需要更多关注。
预渲染： 在某些极端情况下，可以考虑在图片加载完成后，用JavaScript预先渲染一个模糊版本的图片，然后通过切换
```
src
```
登录后复制
或者
```
background-image
```
登录后复制
来达到效果，但这会增加开发复杂度和资源加载量。

通常情况下，对于简单的图片模糊聚焦效果，合理使用