Изменение размера текста и цвета поэтапно

Я хочу знать, можно ли изменить размер текста и цвет поэтапно в той же строке, например:

Я хочу использовать CSS только по возможности. Любое другое решение, которое, по крайней мере, не заставляет меня помещать каждую букву в свой собственный промежуток, тоже приветствуется.

Ответы

Ответ 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;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: rotateY(70deg);
  transform-origin: left;
}

<div>
  Lorem Ipsum Lorem
</div>

Ответ 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>

Ответ 3

Используя Джеймса Доннелли, ответьте немного 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>

Ответ 4

вдохновил @James Доннелли ответить

это решение более динамичное, промежутки будут генерироваться с помощью 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>

Ответ 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>