除了鼠标悬停，还可通过1. 点击事件（javascript监听click并切换类名）、2. 页面滚动（结合intersection observer api检测视口进入）、3. 表单控件状态（利用:checked配合css选择器）来触发图片模糊聚焦效果；这些方法扩展了交互场景，使图片在用户点击、滚动至指定区域或切换选项时从模糊变清晰，提升动态体验。
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值，仍然可能导致性能瓶颈，表现为动画卡顿、页面响应变慢，甚至在低端设备上出现明显的掉帧。
主要的影响点在于：
-
重绘 (Repaint)： 每次
filter
值改变，浏览器都需要重新计算并绘制受影响的像素。 - GPU资源消耗： 即使有GPU加速，过多的计算也会占用GPU资源，影响其他动画或渲染任务。
-
内存占用： 某些复杂的
filter
操作可能需要更多的内存来存储中间计算结果。
那么，如何优化呢？
首先，最直接的优化就是合理设置模糊半径。没必要设置一个极高的模糊值，只要能达到视觉效果即可。较小的模糊半径意味着较少的像素计算。
其次，利用好CSS的
will-change属性。就像上面代码中展示的
will-change: filter, transform;。这个属性是给浏览器一个“提示”，告诉它在不久的将来，这些属性会发生变化。浏览器收到这个提示后，可能会提前进行一些优化，比如为这些属性分配独立的合成层（composited layer），从而减少主线程的负担，让动画更流畅。但要注意，
will-change不能滥用，只应用于确实会频繁变化的属性，否则反而可能增加内存消耗。
另外，优化图片本身也很重要。使用适当尺寸和压缩的图片，可以从源头上减轻浏览器的处理负担。如果图片本身就很大，即使模糊处理后，其原始数据量依然存在。
最后，如果你的模糊聚焦效果是在一个非常复杂的页面上，并且性能问题依然突出，你可能需要考虑一些更高级的技巧，比如：
-
使用SVG滤镜： SVG的
<filter>
元素提供了更强大的图像处理能力，但学习曲线较陡峭，且浏览器兼容性可能需要更多关注。 -
预渲染： 在某些极端情况下，可以考虑在图片加载完成后，用JavaScript预先渲染一个模糊版本的图片，然后通过切换
src
或者background-image
来达到效果，但这会增加开发复杂度和资源加载量。
通常情况下，对于简单的图片模糊聚焦效果，合理使用
filter和
transition，并配合
will-change，就能获得不错的性能表现了。关键在于“适度”和“按需”。
