如何为Resume链接实现hover时的文本滚动翻转动效？

你当前的代码仅实现了黄色文本从下方移入，但原黑色文本没有滚动移出，核心问题是hover时未给原文本设置滚动的transform值，且多余的颜色修改没必要（原文本会完全滚出视野）。以下是修改方案：

修改后的CSS代码 #

.nav-item .nav-link span {
  overflow: hidden;
  position: relative;
  display: inline-block;
  transition: transform 0.3s ease; /* 仅保留transform过渡，颜色无需过渡 */
  line-height: 1; /* 统一行高，避免动画抖动 */
}

/* 鼠标悬停时，原黑色文本向下滚动出视野 */
.nav-item .nav-link:hover span {
  transform: translate3d(0, 100%, 0);
}

.nav-item .nav-link span:before {
  position: absolute;
  top: 100%; /* 初始状态在原文本下方 */
  left: 0;
  content: attr(data-hover);
  color: #ffc107; /* 固定黄色文本颜色 */
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s ease;
  white-space: nowrap; /* 确保文本不换行，和原文本布局一致 */
}

/* 鼠标悬停时，黄色文本向上滚动到原位置 */
.nav-item .nav-link:hover span:before {
  transform: translate3d(0, -100%, 0);
}

关键改动说明 #

• 移除了span的color过渡属性：原文本会完全滚出容器（容器设置了overflow:hidden），无需修改颜色
• 给hover状态的span添加transform: translate3d(0, 100%, 0)：让原黑色文本向下滚动出可视区域
• 给::before伪元素添加white-space: nowrap：避免文本换行，保证和原文本的布局一致
• 直接给::before设置color: #ffc107：避免继承原文本颜色，确保黄色文本显示正确

完整HTML代码（无需修改） #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm container">
  <img class="navbar-brand" src="/assets/8726390_user_icon.svg" alt="">
  <div class="navbar-title-container">
    <span class="navbar-title">CKY</span>
  </div>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Projects</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <span data-hover="Resume">Resume</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

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