HTML/CSS文本加载效果咨询：名称及类似Bootstrap的相关资源

嗨，这个效果通常被叫做逐行文本渐显/加载动画，不用特意找Bootstrap专属插件，纯CSS就能快速实现，也有一些通用的动画工具可以帮你搞定，下面给你具体方案：

一、纯CSS实现方案 #

这种方法不需要任何JS，通过CSS动画的延迟属性来控制每行依次显示，适合静态文本的场景：

<style>
  .text-container .line {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
  }
  /* 给每一行设置递增的延迟，实现逐行加载 */
  .text-container .line:nth-child(1) { animation-delay: 0.2s; }
  .text-container .line:nth-child(2) { animation-delay: 0.4s; }
  .text-container .line:nth-child(3) { animation-delay: 0.6s; }
  .text-container .line:nth-child(4) { animation-delay: 0.8s; }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>

<div class="text-container">
  <p class="line">第一行文本内容</p>
  <p class="line">第二行文本内容</p>
  <p class="line">第三行文本内容</p>
  <p class="line">第四行文本内容</p>
</div>

你可以根据需求调整动画的时长、延迟时间，或者把fadeInUp换成单纯的淡入fadeIn等其他效果。

二、通用动画插件推荐 #

如果需要更灵活的控制（比如滚动触发、更多动画类型），可以用这些成熟的工具：

• AOS (Animate On Scroll)：不仅支持页面加载时的逐行动画，还能设置滚动到视图时触发，配置简单，不需要写大量CSS。
• Animate.css：提供了几十种预定义动画，你只需要给每行文本添加对应的动画类，再配合一点JS控制延迟就能实现逐行效果。
• ScrollReveal：专门做滚动触发的元素动画，能轻松实现逐行、逐个元素的渐显效果，API很友好。

另外，完全不用担心提问的问题表述，Stack Overflow本来就是用来解决HTML/CSS这类前端问题的好地方，以后有相关疑问尽管来问就好～

内容的提问来源于stack exchange，提问作者User97798