模糊揭示文字（滚动进出视口触发 CSS 源码）

效果演示（真实可交互）

下方四行文字初始是模糊的虚影，进入视野后从第一行开始依次「对焦」，每行间隔 0.18 秒，伴随轻微上移，形成逐行清晰浮现的叙事节奏。把页面往下滚、让这组文字离开视口再滚回来，它会再次从模糊变清晰；点击「重新播放」按钮可以随时手动重放一遍。

完整代码

HTML 结构：每行一个段落，行内 style 写入错峰延迟：

<div class="br-stage" id="brStage">
  <p class="br-line" style="--d:0s">真正的优雅</p>
  <p class="br-line" style="--d:.18s">不是一目了然</p>
  <p class="br-line" style="--d:.36s">而是从模糊之中</p>
  <p class="br-line" style="--d:.54s">慢慢变得清晰</p>
</div>

核心 CSS：模糊与透明是初始态，容器加 .show 后过渡到清晰：

.br-line {
  opacity: 0; filter: blur(14px); transform: translateY(10px);
  transition:
    opacity .9s ease var(--d, 0s),
    filter .9s ease var(--d, 0s),
    transform .9s ease var(--d, 0s);
}
.br-stage.show .br-line { opacity: 1; filter: blur(0); transform: translateY(0); }

原生 JS：IntersectionObserver 监听舞台进出视口，相交加 .show，离开移除：

const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => stage.classList.toggle('show', e.isIntersecting));
}, { threshold: 0.25 });
io.observe(stage);

参数说明

兼容性与性能

• filter: blur 是 GPU 加速的绘制属性，过渡期间浏览器按帧重绘，行数建议控制在 6 行以内
• IntersectionObserver 是异步回调，不阻塞滚动主线程；老浏览器可用 scroll 事件 + getBoundingClientRect 兜底
• 已适配 prefers-reduced-motion：系统开启「减弱动态效果」时直接显示清晰文字，不做模糊动画
• 模糊 + 透明同时过渡，动画结束后 filter 归零，不残留合成层

常见问题

Q: 页面打开时文字没有动画直接显示了？ 检查舞台是否已在视口内且 IO 已绑定；本组件首次相交即触发，若希望延迟可用 animation-delay 或先加 .paused 类。

Q: 想让整段一起清晰而不是逐行？ 把每行的 --d 全部设为 0s 即可，错峰完全由延迟控制。

Q: 模糊动画在低端手机上掉帧？ 减小模糊半径到 8px、过渡时长缩短到 .6s，或改用 opacity 单属性渐显。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。