Javascript/CSS:随着文本变长,淡化文本字符串

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>