文字拆分动画丢失渐变变为黑色问题求助

问题描述 #

尝试复现Hyperplexed视频中的文字效果，文字拆分功能正常，但为文字应用渐变后，文字变为黑色。已尝试通过hover触发渐变、修改颜色值等方式，问题依旧。

原因分析 #

1. JS将a标签内的文字拆分为多个.letter span元素，当前CSS仅给a标签设置了渐变样式，.letter元素继承了a标签的color: #fff，直接覆盖了渐变效果。
2. 选择器.letter > .magic无效，没有给拆分后的span元素添加magic类，渐变动画无法作用到单个文字上。

解决方案 #

• 将渐变及动画样式直接应用到.letter元素，确保每个拆分后的文字span都能获得渐变效果。
• 移除a标签上的默认白色color: #fff，避免其覆盖渐变的透明文字填充属性。

修正后的代码 #

HTML（无需修改） #

<div class="container" id="text">
  <div class="line magic">
    <a href="#" class="word fancy" id="split">Home</a>
  </div>
  <div class="line magic">
    <a href="#" class="word fancy" id="split1">About</a>
  </div>
  <div class="line magic">
    <a href="#" class="word fancy" id="split2">Shop</a>
  </div>
  <div class="line magic">
    <a href="#" class="word fancy" id="split3">Contact</a>
  </div>
</div>

CSS（核心样式修改） #

body {
  background-color : #000;
  margin           : 0;
  display          : flex;
  flex-direction   : column;
  align-items      : center;
  justify-content  : center;
  height           : 100vh;
}
.line {
  display         : flex;
  justify-content : space-between;
}
p,
a {
  /* 移除默认白色，避免覆盖渐变 */
  font-size       : 5vw;
  font-family     : 'Rubik', sans-serif;
  margin          : 0rem;
  text-transform  : uppercase;
}
a {
  text-decoration : none;
}
#text:has(.fancy:hover) .word:not(.fancy:hover) {
  opacity         : 0.4;
}
.fancy > .letter {
  display         : inline-block;
  transition      : transform 350ms ease;
  /* 将渐变和动画直接应用到每个文字span */
  animation               : background-pan 15s linear infinite;
  background              : linear-gradient(to right,#ecf2ff,#e3dffd,#e5d1fa,#fff4d2,#ecf2ff);
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
}
.fancy:hover > .letter {
  transition-duration: 800ms;
}
.fancy:hover > .letter:nth-child(1) { transform : translate(-80%, 60%) rotate( 8deg); }
.fancy:hover > .letter:nth-child(2) { transform : translate(0%, 8%)    rotate(-6deg); }
.fancy:hover > .letter:nth-child(3) { transform : translate(-10%, 60%) rotate(-6deg); }
.fancy:hover > .letter:nth-child(4) { transform : translate(0%, 8%)    rotate(-8deg); }
.fancy:hover > .letter:nth-child(5) { transform : translate(0%, 60%)   rotate(-3deg); }
.fancy:hover > .letter:nth-child(6) { transform : translate(0%, 20%)   rotate(-3deg); }
.fancy:hover > .letter:nth-child(7) { transform : translate(0%, 80%)   rotate(-5deg); }

@keyframes background-pan {
  from { background-position:    0% center; }
  to   { background-position: -200% center; }
}

JS（优化重复代码，功能不变） #

// 合并重复逻辑，用一个函数处理所有目标元素
const enhance = (id) => {
  const element = document.getElementById(id);
  const text = element.innerText.split('');
  element.innerText = '';

  text.forEach((letter) => {
    const span = document.createElement('span');
    span.className = 'letter';
    span.innerText = letter;
    element.appendChild(span);
  });
};

enhance('split');
enhance('split1');
enhance('split2');
enhance('split3');

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