如何用CSS实现类似uniqualitech.com的基线式文字揭示动画？

你需要实现从基线位置逐步揭示的文字动画，现有代码效果接近目标但存在偏差，且文本内容增多时动画完全失效。

你当前的尝试代码 #

<h1>
  <span class="text">Hello, World!</span>
</h1>

h1 {
  overflow: hidden;
}
h1 .text {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  display: inline-block;
  animation: baseline 0.5s forwards cubic-bezier(.4,0,.39,1.04);
}
@keyframes baseline {
  0% { transform: translateY(140%); }
  100% { transform: translateY(0); }
}

/* 基础样式 */
html {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  color: white;
  background: #37474f; 
}

问题分析 #

当前代码的核心问题在于使用inline-block元素的整体translateY动画：

• 单行文本时效果接近，但本质是整个文本块向上移动，并非从基线逐步揭示
• 多行文本时，inline-block会变成包含所有行的块级容器，动画时整个块位移，完全偏离预期效果

解决方案：使用Clip-Path实现基线揭示动画 #

改用clip-path可以实现更贴合目标的效果，同时完美适配多行文本：

修改后的代码 #

<h1 class="baseline-reveal">
  Hello, World!
  <br>
  这是多行文本
  <br>
  会从基线逐步显现
</h1>

.baseline-reveal {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  /* 初始状态：完全隐藏文字，仅留底部0高度区域 */
  clip-path: inset(100% 0 0 0);
  /* 动画参数：时长、缓动曲线可按需调整 */
  animation: reveal-from-baseline 0.8s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes reveal-from-baseline {
  to {
    /* 最终状态：取消裁剪，显示全部文字 */
    clip-path: inset(0 0 0 0);
  }
}

/* 基础样式 */
html {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

body {
  color: white;
  background: #37474f;
}

效果说明 #

• clip-path: inset(100% 0 0 0) 初始时将文字完全裁剪，仅底部0高度的区域可见，对应“从基线开始”的效果
• 动画过程中逐步缩小裁剪范围，实现文字从基线向上逐步揭示的视觉效果
• 该方案支持任意行数的文本，不会出现布局错乱
• 你可以根据需求调整animation的时长（0.8s）和缓动曲线（cubic-bezier）来匹配目标网站的动画节奏

内容的提问来源于stack exchange，提问作者Pavan Sargar