寻求‘从墙后升起’式入场动画的名称及相关技术资料

安全阿岳

2026-8-13

实现文本从“隐形墙”后升起的入场动画

这个效果没有统一的官方命名，业内一般称其为容器遮罩式上移入场动画，核心是利用「可视区域裁剪」来模拟“墙后隐藏”的视觉效果，下面是具体实现思路和代码示例：

核心实现逻辑

用一个容器作为“隐形墙”，通过overflow: hidden限制文本的可视范围，超出容器的部分会被隐藏；
让文本初始状态处于容器下方（完全被隐藏），通过动画将文本向上移动至容器内的可见位置，营造“从墙后升起”的观感。

代码实现示例

方法1：基于overflow:hidden的经典实现

这是兼容性最好的方案，适配所有现代浏览器：

<div class="text-wrapper">
  <span class="slide-up-text">A digital design studio...</span>
</div>

.text-wrapper {
  overflow: hidden;
  /* 高度设置为文本行高，确保裁剪范围精准 */
  height: 1.6em;
  line-height: 1.6;
}

.slide-up-text {
  display: inline-block;
  /* 初始状态：文本完全在容器下方 */
  transform: translateY(100%);
  /* 动画：0.8秒内向上滑入，ease曲线让过渡更自然 */
  animation: slideUp 0.8s ease-out forwards;
}

@keyframes slideUp {
  to {
    transform: translateY(0);
  }
}

方法2：基于clip-path的极简实现

无需额外容器，直接用CSS裁剪属性控制文本可见范围，适合现代浏览器场景：

<span class="clip-reveal-text">A digital design studio...</span>

.clip-reveal-text {
  /* 初始状态：裁剪掉全部可见区域（只显示下方0%的内容） */
  clip-path: inset(100% 0 0 0);
  animation: revealUp 0.8s ease-out forwards;
}

@keyframes revealUp {
  to {
    /* 动画结束：显示全部文本 */
    clip-path: inset(0 0 0 0);
  }
}