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>

Answer 2

如果您知道背景色（即黑色，如上图所示），则可以使用伪CSS选择器来模拟效果：

.fadeout {
  position:relative;
  color: #fff;
  background: #000;
}

.fadeout:after {
  content:'';
  top:0;
  bottom:0;
  right:0;
  width:50%;
  background: linear-gradient(90deg ,transparent,black);
  position:absolute;
  z-index:1;
  pointer-events:none;
}

<span class="fadeout">This is a test test long text for example</span>