通过将 CSS 伪类从 :active 改为 :focus 并配合 tabindex 属性，可使图片在点击后持久保持缩放与模糊效果，避免视觉回弹，同时确保跳转逻辑不受影响。
通过将 css 伪类从 `:active` 改为 `:focus` 并配合 `tabindex` 属性，可使图片在点击后持久保持缩放与模糊效果，避免视觉回弹，同时确保跳转逻辑不受影响。
要实现“点击图片 → 先完成缩放+模糊动画 → 保持该状态不回弹 → 再跳转至目标页面”的体验，核心在于状态的持续性控制：:active 仅在鼠标按下瞬间生效（松开即失效），无法维持；而 :focus 可在元素获得焦点后持续存在，直到显式失去焦点（如点击其他区域或按 Tab 切换）。
✅ 正确做法如下：
-
为
<img>或<a></a>包裹的图片添加tabindex="0"，使其可获得焦点（原生<img>默认不可聚焦）； -
将动画样式从
:active迁移至:focus； - 保留原有 transition 声明，确保动画平滑；
- （可选）用 JavaScript 在跳转前主动触发 focus，确保首次点击必获焦点。
示例完整 HTML + CSS：
<a href="project-page.html" class="project-link"> <img src="project-thumb.jpg" alt="Project thumbnail" class="project-zoom" tabindex="0"></a>
.project-zoom {
transition: transform 1s, filter 1s ease-in-out;
margin: 0 auto;
display: block;
}
.project-zoom:focus {
transform: scale(10);
filter: blur(2px);
/* 兼容性前缀（现代项目中可酌情省略） */
-ms-transform: scale(10);
-webkit-transform: scale(10);
}
/* 可选：移除默认焦点轮廓，提升视觉一致性 */
.project-zoom:focus {
outline: none;
}
⚠️ 注意事项：
- 若用户使用键盘导航（Tab 键），图片获得焦点后也会触发缩放，符合无障碍规范；如需仅响应鼠标点击，可用 JS 绑定
click事件并手动element.focus()，但:focus方案更轻量、无 JS 依赖； - 页面跳转后焦点自动丢失，无需额外清理；若需在当前页内模拟“停留缩放”，可结合
:target或 JS 控制 class； -
scale(10)数值较大，建议根据容器尺寸调整（如scale(1.3)更实用），避免溢出或性能抖动； - 在 Safari 中，对
<img>直接设transform可能触发渲染异常，推荐外层<a></a>或<div> 包裹并应用 <code>:focus更稳妥。总结：纯 CSS 方案完全可行——
tabindex + :focus是比:active或 JS 延迟更简洁、可靠且语义正确的解法。它既满足视觉连贯性需求，又保持代码轻量与可访问性。
