Blur Focus 模糊聚焦字
A single keyframe alternating between blur(8px) at 40% opacity and fully sharp. 一条关键帧，在 blur(8px)、40% 透明度和完全清晰之间来回。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
The animation is applied via JS so the class is not needed in markup, but the whole effect is one @keyframes block. Combining blur with opacity is deliberate: blur alone at full opacity still looks like a rendering bug, while a dimmer image reads as genuinely out of focus. 动画是用 JS 挂上去的（所以 HTML 里不用加类名），但效果本体就是一整块 @keyframes。模糊和透明度一起降是刻意的：光模糊不降透明度，看起来像渲染出错；把亮度一起压低，才像真的失焦。
What to change可以改的地方
- 1Push the blur to 16px for a stronger depth-of-field feel.
- 2Stagger two lines of text with animation-delay so they focus at different moments.
- 1blur 推到 16px，景深感更强。
- 2两行文字各加一个 animation-delay，就会在不同时刻对上焦。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。