通过 CSS :focus 伪类替代 :active，配合 标签的 tabindex 属性，可让图片在点击后维持缩放和模糊状态；再结合 JavaScript 延迟页面跳转，避免视觉回弹，实现平滑过渡体验。
通过 css `:focus` 伪类替代 `:active`，配合 `` 标签的 `tabindex` 属性，可让图片在点击后维持缩放和模糊状态；再结合 javascript 延迟页面跳转，避免视觉回弹，实现平滑过渡体验。
要实现“点击图片后先放大模糊、保持该状态、再跳转页面”，核心在于两点：状态持久化与跳转时机控制。纯 CSS 的 :active 仅在鼠标按下瞬间生效，松开即失效，因此无法维持效果；而 :focus 可在元素获得焦点后持续应用样式——只要我们确保链接在点击后仍保持焦点（且不被自动移除），就能达成“定格缩放+模糊”的视觉效果。
✅ 正确的 CSS 写法（支持持久效果）
.project-zoom {
transition: transform 1s, filter 1s ease-in-out;
margin: 0 auto;
/* 关键：确保 <a> 元素可获得焦点 */
outline: none; /* 可选：去除默认焦点轮廓，提升美观 */
}
.project-zoom:focus {
-ms-transform: scale(10);
-webkit-transform: scale(10);
transform: scale(10);
filter: blur(2px);
}</a>
✅ HTML 结构（必须添加 tabindex="0"）
<a href="https://www.php.cn/link/732e3d5a62c1d1475646db1a2df039a8" class="project-zoom" tabindex="0"> <img src="project-thumb.jpg" alt="Project thumbnail"></a>
⚠️ 注意：
<a></a>默认可聚焦，但若被包裹在其他交互元素中或受 CSSpointer-events: none影响，可能失焦。显式添加tabindex="0"是最可靠的做法，确保点击后焦点稳定落在该链接上。
✅ JavaScript 延迟跳转（防止过早跳转导致效果中断）
document.querySelectorAll('.project-zoom').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault(); // 阻止立即跳转
const href = this.getAttribute('href');
// 等待动画完成后再跳转（1s 动画 + 安全缓冲 100ms）
setTimeout(() => {
window.location.href = href;
}, 1100);
});
});
此方案兼容所有现代浏览器，无需 jQuery，轻量可靠。
? 补充说明与注意事项
-
移动端适配：iOS Safari 对
:focus在非表单元素上的触发有严格限制（通常需tabindex+ 手动聚焦）。上述写法已覆盖该场景，但建议在真机测试时验证触控响应。 -
无障碍友好：保留
outline或提供替代焦点样式（如box-shadow），避免影响键盘用户导航。 -
性能优化：
transform和filter均属 GPU 加速属性，缩放至scale(10)在多数设备上仍流畅；若出现卡顿，可尝试scale(3)并搭配overflow: hidden容器裁剪。 -
IE 兼容性：IE9–11 支持
-ms-transform，但filter: blur()在 IE 中无效（仅 WebKit/Edge Chromium 支持），如需 IE 模糊效果，需用 SVG 滤镜或 JS 方案替代。
最终效果：用户点击图片 → 立即触发动画 → 1 秒内平滑放大+模糊 → 动画结束后跳转新页面 —— 全程无“回弹”闪烁，体验连贯专业。
