用css+原生js实现一个文字逐个透明度从0到1的动画

可以使用以下代码实现文字逐个透明度从0到1的动画效果：

HTML:

<div id="text-container">
  <p id="text">Hello, World!</p>
</div>

CSS:

#text span {
  opacity: 0;
}

#text span.active {
  animation: fade-in 1s ease forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

JavaScript:

const text = document.getElementById("text");
const letters = text.textContent.split("");

text.textContent = "";

for (let i = 0; i < letters.length; i++) {
  text.innerHTML += "<span>" + letters[i] + "</span>";
}

const spans = text.querySelectorAll("span");
let index = 0;

function showLetter() {
  spans[index].classList.add("active");
  index++;

  if (index === spans.length) {
    clearInterval(timer);
    timer = null;
    return;
  }
}

let timer = setInterval(showLetter, 100);

这段代码将文字分割成单个字母，然后使用一个定时器逐个添加样式类，使字母逐渐显示出来。每个字母都有一个单独的透明度，通过添加 `active` 类来触发 `fade-in` 动画，使每个字母的透明度从0到1过渡。