如何实现Web上文字的渐入效果

要在Web上实现文字的渐入效果，可以使用CSS动画和JavaScript。以下是一个简单的实现方式：

1. 使用CSS为渐入效果定义关键帧（keyframes）。
2. 使用JavaScript来在元素出现在页面上时触发这个动画。

HTML:

<div id="text-container">
  这是将要有渐入效果的文字。
</div>

CSS:

#text-container {
  opacity: 0;
  animation: fadeIn 2s forwards;
}
 
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

JavaScript:

window.onload = function() {
  var textContainer = document.getElementById('text-container');
  var observer = new IntersectionObserver(function(entries) {
    if (entries[0].isIntersecting) {
      textContainer.classList.add('animated');
    }
  });
 
  observer.observe(textContainer);
};

这段代码中，IntersectionObserver用于检测元素何时进入视口。当元素即将进入视口时，它会添加一个类（例如animated），该类触发CSS动画。动画通过设置opacity从0变为1，实现了渐入效果。