javascript - 逐步更改文本大小和颜色

Question

我想知道是否可以在同一行上逐步更改文本大小和颜色，如下所示:

如果可能的话，我只想使用 CSS。也欢迎任何其他解决方案，至少不会强制我将每个字母放在自己的范围内。

body {
  font-family:monospace;
}

<span style="font-size:50px;">L</span><span style="font-size:45px;opacity:0.7">o</span><span style="font-size:38px;opacity:0.5">r</span>...

Answer 1

没有所有这些标记的一些转换和渐变怎么样:

body {
  perspective: 250px;
  perspective-origin: bottom;
}

div {
  font-size: 70px;
  background: linear-gradient(to right, black,rgba(0,0,0,0.3),rgba(0,0,0,0.2));
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transform: rotateY(70deg);
  transform-origin: left;
}

<div>
  Lorem Ipsum Lorem
</div>