纯CSS实现适配图片背景的文字上滑遮罩动画

核心思路是放弃「和背景同色伪元素做遮罩」的方案，改用overflow: hidden裁剪文本容器实现天然遮罩，完全不依赖背景属性，适配图片、渐变、动态背景等所有场景。

实现代码 #

CSS部分 #

.offset-header {
  font-family: Outfit, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 42px;
  line-height: 44px;
  letter-spacing: -0.02em;
  max-width: 500px;
  margin: 10px 0;
}

/* 单行文本容器：核心遮罩逻辑 */
.offset-header-odd,
.offset-header-even {
  display: block;
  overflow: hidden; /* 裁剪超出容器范围的内容，实现无背景依赖的遮罩 */
}

/* 内层文本元素执行上滑动画 */
.offset-header-odd > span,
.offset-header-even > span {
  display: inline-block;
  animation: slideUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.offset-header-odd {
  text-align: left;
}
.offset-header-odd > span {
  animation-delay: 0s;
}

.offset-header-even {
  text-align: right;
}
.offset-header-even > span {
  animation-delay: 150ms; /* 保留奇偶行错位出现的逻辑 */
}

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

HTML部分 #

仅需在原有文本外层多包一层span，改动极小：

<div class="offset-header">
  <h1 class="hero-header">
    <span class="offset-header-odd"><span>Elevate your space </span></span>
    <span class="offset-header-even"><span>with thoughtful design</span></span>
  </h1>
</div>

关键说明 #

• 去掉了原代码中的opacity淡入逻辑，还原参考页面的硬边滑入质感，如果需要淡入效果可自行在关键帧中添加opacity属性
• 缓动函数使用cubic-bezier(0.22, 1, 0.36, 1)，动效更接近参考页面的自然顺滑感，可根据需求调整
• 动画时长默认设置为1.2s，可通过修改animation-duration的值调整动画速度
• 该方案完全不依赖页面背景，不管背景是随机图片、视频、渐变还是动态变化的内容，遮罩效果都能正常生效

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