文字裁剪揭示（幕布式方向可控 CSS 源码）

效果演示（真实可交互）

下方三行文字默认被「幕布」遮挡，页面加载后依次从下往上滑出，仿佛幕布缓缓拉开，每行间隔 0.15 秒。下拉框可以切换从下往上、从上往下、从左往右、从右往左四种揭示方向；点击「重新播放」会收起幕布再重新拉开。该效果常用于章节标题的入场仪式感。

完整代码

HTML 结构：每行由外层裁剪容器 + 内层位移元素组成，错峰延迟写在内层行内：

<div class="tc-stage" id="tcStage">
  <p class="tc-item" style="--d:0s"><span class="tc-inner">裁剪揭示文字</span></p>
  <p class="tc-item" style="--d:.15s"><span class="tc-inner">如幕布缓缓拉开</span></p>
  <p class="tc-item" style="--d:.3s"><span class="tc-inner">粤喵组件站出品</span></p>
</div>

核心 CSS：外层 overflow: hidden 是幕布，内层默认移出可视区，容器加 .show 后移回原位：

.tc-item { margin: 0; overflow: hidden; }
.tc-inner {
  display: inline-block; font-size: 36px; font-weight: 800;
  transform: translateY(110%);                      /* 默认藏在下方 */
  transition: transform .8s cubic-bezier(.6, .05, .25, 1) var(--d, 0s);
}
.tc-stage.dir-bt .tc-inner { transform: translateY(-110%); }   /* 从上往下 */
.tc-stage.dir-lr .tc-inner { transform: translateX(-110%); }   /* 从左往右 */
.tc-stage.dir-rl .tc-inner { transform: translateX(110%); }    /* 从右往左 */
.tc-stage.show .tc-inner { transform: translateY(0); }         /* 揭示到原位 */

原生 JS：方向切换只改类名，重播先移除 .show、强制回流再加回：

function replayNow() {
  stage.classList.remove('show');
  void stage.offsetWidth;
  stage.classList.add('show');
}
dirSel.addEventListener('change', () => {
  stage.classList.add('dir-' + dirSel.value);
  replayNow();
});

参数说明

兼容性与性能

• 原理是 overflow: hidden + transform 位移，全部为合成层操作，无布局抖动
• 位移 110% 而非 100%，避免子像素缝隙露出文字边缘
• 方向切换即时生效：切换瞬间文字会以新方向重新入场一次，视觉无残留
• 中文按行整行滑入，若想逐字滑入可把内层再拆成字符 span 并加延迟

常见问题

Q: 滑动时文字边缘有「描边」或残影？ 位移量使用 110% 且裁剪容器不加 padding 即可；若仍有残影，给外层加 will-change: transform 让浏览器提前建层。

Q: 想做成从中间向两侧展开？ 用两个内层分别 translateX(-110%) 与 translateX(110%)，各自向左/右移出即可实现对称幕布。

Q: 滚动到页面才触发怎么做？ 参考粤喵的 blur-reveal-text 组件：用 IntersectionObserver 在进入视口时加 .show，离开时移除。

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