如何在跨度上获得这种“文本消失”效果？

Question

我有以下span元素：<span id='title'>SOME TEXT HERE</span>，带有以下CSS：

color: #fff;
line-height: 22px;
font-size: 16px;
float: left;
max-width: 320px;
overflow: hidden;
white-space: nowrap;

我正在尝试在文本上实现这种“消失的”效果。我玩过:after，但没有成功...

Answer 1

类似的事情应该可以解决。

.fade-out {
  position: relative;
  max-height: 350px;
}

.fade-out:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
}

<span class='fade-out'>Spiderman Will Appear In Another MCU Movie Later Next Year</span>

希望这会有所帮助，