css文字一个个慢慢出现效果

/* CSS代码 */
@keyframes fadeInText {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-text {
  opacity: 0;
  animation: fadeInText 0.5s ease-out forwards;
}

/* HTML代码 */
<div class="text-container">
  <span class="fade-in-text">H</span>
  <span class="fade-in-text">e</span>
  <span class="fade-in-text">l</span>
  <span class="fade-in-text">l</span>
  <span class="fade-in-text">o</span>
</div>

/* JavaScript代码 */
document.addEventListener("DOMContentLoaded", function() {
  const textContainer = document.querySelector('.text-container');
  const letters = textContainer.querySelectorAll('.fade-in-text');

  letters.forEach((letter, index) => {
    setTimeout(() => {
      letter.style.animationDelay = `${index * 0.2}s`;
      letter.style.opacity = '1';
    }, index * 200);
  });
});

解释说明：

1. CSS部分:

   • @keyframes fadeInText 定义了一个动画，从透明度为0且有向下偏移的位置（translateY(20px)）到透明度为1且无偏移的位置。
   • .fade-in-text 类设置了初始透明度为0，并应用了上述动画，持续时间为0.5秒，缓动函数为ease-out，并且动画结束后保持最终状态。

2. HTML部分:

   • 使用<span>标签将每个字母包裹起来，并给每个字母添加fade-in-text类。这样可以逐个控制每个字母的动画效果。

3. JavaScript部分:

   • 在页面加载完成后，通过遍历所有带有fade-in-text类的元素，使用setTimeout为每个字母设置不同的延迟时间，从而实现逐个字母依次出现的效果。每个字母之间的延迟时间为200毫秒（即0.2秒）。