JavaScript/CSS : Fade string of text as it gets longer

Question

我已经搜索了这个问题的答案，它可能存在于某个地方，但我不确定如何解释它，我一直在寻找方法来淡化文本加载/卸载，这不是我尝试这样做的方式。我试图淡化同一行上的一些文本，我将附上我在 Photoshop 中制作的模拟屏幕截图:

在我设置的当前字体系列和大小中，我希望它开始淡出大约 20 个字符到文本中。理想情况下，如果我可以做类似...

<span class="fadeout"> 

或类似的东西，这很简单。

Answer 1

你真正想要的是渐变文本(仅限 webkit!):

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(0deg, #fff, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  
body {
  background-color:black;
  }

<h1>Test text that is long</h1>

这将在文本的开头开始淡入淡出。如果您想在特定点之后开始，那么您别无选择，只能将文本的褪色部分包裹在 span 中:

span.fade {
  background: -webkit-linear-gradient(0deg, #fff, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  
h1 {
  color:white
}
  
body {
  background-color:black;
  }

<h1>Test text that is long <span class="fade">but only begins to fade here</span></h1>