逐步更改文本大小和颜色

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>

Answer 2

这实际上取决于您的 HTML 标记。你不能用纯文本“Lorem ipsum”来做到这一点，但如果每个字母都非常简单地包裹在它自己的单独元素中，你就可以做到这一点：

body > span {
  font-size: 72px;
}

span > span {
  font-size: 85%;
  opacity: 0.8;
}

<span>
  L<span>
    o<span>
      r<span>
        e<span>
          m <span>
            i<span>
              p<span>
                s<span>
                  u<span>
                    m
                  </span>
                </span>
              </span>
            </span>
          </span>
        </span>
      </span>
    </span>
  </span>
</span>

但是，如果不修改现有标记或引入一些 JavaScript 来为您执行此操作，您可能无法执行此操作。

至于颜色，您可以使用这种方法更改每个字母的opacity（根据上面的示例），但我不确定这是否可以轻松实现，而无需单独对每个字母应用样式.

Answer 3

使用James Donnelly 回答一点JS：

format = ([head, ...tail]) => {
    if(tail.length == 0)
        return "<span>" + head + "</span>";
    return "<span>" + head + format(tail) + "</span>";
}

var el = document.querySelector(".test");

el.innerHTML = format(el.innerText)

.test > span {
    font-size: 72px;
}

span > span {
    font-size: 85%;
    opacity: 0.8;
}

<div class="test">
    Lorem ipsum
</div>

Answer 4

灵感来自 @James Donnelly 的回答

这个解决方案更加动态，跨度将使用 javascript 生成

查看代码

document.addEventListener('DOMContentLoaded', function()
{ 
    var fooDiv = document.getElementsByClassName("foo")[0];
    var text = fooDiv.innerHTML.trim();
    var textToSpans = "";
    var textLength = text.length;
    for(var i=0;i<textLength;i++){
        textToSpans += "<span>" + text[i];
    }

    for(i=0;i<textLength;i++){
        textToSpans += "</span>";
    }
    fooDiv.innerHTML = textToSpans;

    //change the class so if this code run again this div will not effected
    fooDiv.className = "bar";

}, false);

.bar > span {
    font-size: 72px;
}

span > span {
    font-size: 85%;
    opacity: 0.8;
}

<div class="foo">
    Lorem ips
</div>

Answer 5

var GradientLetters = class {
  constructor(id, fontSizeStep) {
    this.element = document.getElementById(id);
    this.fontSizeStep = fontSizeStep;  
    this.letters = document.getElementById(id).innerText.split("");
    document.getElementById(id).innerText = "";
    this.makeGradient();
  }
  makeGradient() {
    this.letters.forEach((currentValue, index) => {
      let span = document.createElement("SPAN");
      span.innerText = currentValue;
      span.style.color = "rgba(0, 0, 0, " + (1 / index) + ")";
      span.style.fontSize = 60 - (index * 2) + "px";
      this.element.appendChild(span);
		});
  }
}
let gradientLetters = new GradientLetters("gradient-letters", 10);

p {
  font-family: Arial;
}

<p id="gradient-letters">Lorem ip</p>

不可能。 如果不包装 HTML 标记中的字母，您不能更改单个字母的 CSS 属性。 我发现的唯一内容是::first-letterselector，是第一个字母，而不是后面的。

CSS 上下文中的解释

CSS font-size Property 和 CSS color Property 是您可以在 selectors 的上下文中定义的属性。

选择器是与树中的元素匹配的模式，并且作为 这种形式是可用于选择节点的几种技术之一 在文档中。

因此，定义 CSS 属性而不指向 元素（在本例中为 HTML 元素）似乎是不可能的。

使用 JavaScript

使用 JavaScript 可以将字符串（在本例中为 HTML 元素的 innerText，如段落）拆分为字母，将这些字母包装在 HTML 元素中，然后以多种方式使用 CSS 设置这些元素的样式。在这种情况下，最好以编程方式设置 CSS。