嘿，这个需求挺有意思的——不是常见的左右渐变，而是要从下往上按高度百分比来过渡文字颜色，还得带ease-out的缓动效果对吧？我来给你拆解两种纯CSS的实现方式，都能完美满足你的需求：

方法一：利用背景渐变 + background-clip: text #

这种方法最简洁，核心是让文字“显示”背景的渐变效果，再通过过渡动画切换渐变的颜色断点：

HTML结构 #

<div class="gradient-text">example</div>

CSS样式 #

.gradient-text {
  font-size: 4rem; /* 放大文字方便观察效果 */
  font-weight: bold;
  color: transparent; /* 让文字本身透明，露出背景渐变 */
  /* 初始状态：全黑色渐变 */
  background-image: linear-gradient(to top, black 0%, black 100%);
  background-clip: text; /* 把背景裁剪到文字区域 */
  -webkit-background-clip: text; /* 兼容Chrome、Safari等webkit内核浏览器 */
  /* 添加过渡动画：时长0.5秒，ease-out缓动 */
  transition: background-image 0.5s ease-out;
}

/* 触发过渡的状态（比如hover、点击或JS添加类） */
.gradient-text.active {
  /* 最终状态：下半部分(0-50%)黑色，上半部分(50-100%)红色 */
  background-image: linear-gradient(to top, black 50%, red 50%, red 100%);
}

原理说明 #

通过linear-gradient(to top)定义从下到上的渐变方向，初始时渐变全为黑色；当切换到active状态时，渐变在50%高度的位置从黑色转为红色，配合ease-out的过渡曲线，就实现了红色从底部向上推进到一半高度的效果。

方法二：双层文字叠加 + clip-path动画 #

这种方法更灵活，适合后续需要调整过渡范围或叠加其他效果的场景：

HTML结构 #

<div class="text-container">
  <span class="text-bottom">example</span>
  <span class="text-top">example</span>
</div>

CSS样式 #

.text-container {
  position: relative;
  font-size: 4rem;
  font-weight: bold;
}

/* 底层：黑色文字 */
.text-bottom {
  color: black;
}

/* 上层：红色文字，初始完全隐藏 */
.text-top {
  position: absolute;
  top: 0;
  left: 0;
  color: red;
  /* 初始裁剪：顶部裁剪100%，相当于完全看不见 */
  clip-path: inset(100% 0 0 0);
  /* 添加过渡动画 */
  transition: clip-path 0.5s ease-out;
}

/* 激活后：顶部裁剪50%，显示上半部分红色文字 */
.text-container.active .text-top {
  clip-path: inset(50% 0 0 0);
}

原理说明 #

把两个相同的文字叠放在一起，底层显示黑色，上层显示红色。通过clip-path: inset()控制上层文字的可见区域：初始时完全裁剪掉上层文字，激活后只裁剪顶部50%的区域，露出上半部分的红色文字，视觉上就像红色从下往上“推进”覆盖了一半高度。

自动触发动画（无需交互） #

如果需要页面加载完成后自动播放过渡效果，可以把transition换成CSS动画@keyframes：

以方法二为例，修改CSS如下：

.text-top {
  position: absolute;
  top: 0;
  left: 0;
  color: red;
  clip-path: inset(100% 0 0 0);
  /* 自动播放动画，时长0.5秒，ease-out缓动，结束后保持最终状态 */
  animation: clipSlide 0.5s ease-out forwards;
}

@keyframes clipSlide {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(50% 0 0 0);
  }
}

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