无法在带有动画的文本上应用渐变颜色答案

【问题标题】：Can't apply Gradient Color on Text with Animation无法在带有动画的文本上应用渐变颜色
【发布时间】：2022-06-27 21:03:04
【问题描述】：

我想用动画在h1 上应用渐变色。我在codepen 上有this 代码。如果我在 css 中从 h1 中删除评论，那么我将看不到应用渐变的文本。

var textWrapper = document.querySelector('.ml2 .letter');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml2 .letter',
    scale: [4,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 950,
    delay: (el, i) => 70*i
  }).add({
    targets: '.ml2',
    opacity: 100,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

body {
  display:flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    
    background: linear-gradient(to right, #FDFBFB, #EBEDEE 70%);
}
.ml2 {
  font-weight: 900;
  font-size: 3.5em;
}

.ml2 .letter {
  display: inline-block;
  line-height: 1em;
}

/* h1 {
  font-size: 25px;
    background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} */

  <body>  
    
          <h1 class="ml2"><span class="letter"> Hello World!</span></h1>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

</body>

【问题讨论】：

标签： html css gradient

【解决方案1】：

.ml2 .letter {
  display: inline-block;
  line-height: 1em;
   background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

【讨论】：

只适用于一个文本。