Question

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

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

Answer 1

如果没有所有这些标记

，那么某些转换和渐变怎么办？

＆＃13;

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;
}

＆＃13;

<div>
  Lorem Ipsum Lorem
</div>

＆＃13;

Answer 2

这实际上取决于您的HTML标记。你不能用纯文本＆＃34; Lorem ipsum＆＃34;来做这件事，但如果每个字母都包含在它自己独立的元素中，你就可以做到这一点：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

Answer 3

使用James Donnelly回答一点JS：

＆＃13;

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)

＆＃13;

.test > span {
    font-size: 72px;
}

span > span {
    font-size: 85%;
    opacity: 0.8;
}

＆＃13;

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

＆＃13;

Answer 4

受到 @James Donnelly 的回答

的启发

此解决方案更具动态性，将使用javascript生成跨度

结帐代码

＆＃13;

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);

＆＃13;

.bar > span {
    font-size: 72px;
}

span > span {
    font-size: 85%;
    opacity: 0.8;
}

＆＃13;

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

＆＃13;

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-letter selector，第一个字母不是第二个字母。

在CSS上下文中的解释

CSS字体大小属性和 CSS颜色属性是可以在选择器的上下文中定义的属性。

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

因此，定义CSS属性而不指向元素（在这种情况下为HTML元素）似乎是不可能的。

使用JavaScript

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

逐步更改文本大小和颜色

5 个答案:

在CSS上下文中的解释

使用JavaScript