求助：实现HTML/CSS文本上下滚动悬停动画（反向效果待解决）

要实现鼠标移出时原文本从下方滑入的反向效果，只需在现有CSS基础上补充原文本的过渡逻辑，让它在hover时向下移出，离开时从下方滑回。以下是完整的实现代码：

HTML结构 #

<div class="text-anim">
  <span class="original-text">原内容</span>
  <span class="hover-text">悬停替换内容</span>
</div>

CSS样式 #

.text-anim {
  position: relative;
  display: inline-block;
  overflow: hidden; /* 隐藏超出容器的文本 */
  line-height: 1.2; /* 保持行高一致，避免动画时跳动 */
}

.text-anim span {
  display: block;
  position: absolute;
  width: 100%;
  transition: top 0.3s ease-in-out; /* 统一过渡动画曲线 */
}

/* 默认状态：原文本显示，替换文本在上方隐藏 */
.original-text {
  top: 0;
}
.hover-text {
  top: -100%;
}

/* 悬停状态：替换文本滑入，原文本滑到下方隐藏 */
.text-anim:hover .hover-text {
  top: 0;
}
.text-anim:hover .original-text {
  top: 100%;
}

关键修改说明 #

• 给两个文本元素都添加transition属性，确保鼠标移出时的反向动画能平滑执行
• hover状态下同时控制原文本的位置：将其移动到容器下方（top: 100%），这样移出鼠标时，原文本会从下方滑回初始位置
• 容器设置overflow: hidden，避免文本在动画过程中溢出显示

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