css 字体逐渐单个出来效果

要实现CSS文字逐个逐渐出现的效果，可以借助CSS的animation和@keyframes属性，以下是一个简单的例子：

<p class="fade-in-words">Hello World!</p>

.fade-in-words {
  font-weight: bold; /* 加粗字体 */
  font-size: 36px; /* 字体大小 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏文字内容 */
  border-right: .15em solid orange; /* 光标闪烁 */
  animation: typing 3.5s steps(30, end), blink-caret .75s step-end infinite; /* 逐字出现和光标闪烁 */
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

.fade-in-words > span {
  display: inline-block; /* 行内块级元素 */
  opacity: 0; /* 初始透明 */
  animation: fadeInWords 3.5s ease-in-out forwards; /* 逐个逐渐出现 */
}

@keyframes fadeInWords {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

在上面的代码中，我们首先定义了一个名为"fade-in-words"的类，设置了字体加粗、大小、不换行等样式，并通过overflow:hidden属性隐藏文字内容。接着，我们使用border-right属性模拟光标闪烁的效果，并设置了两个关键帧动画"typing"和"blink-caret"，实现了逐个逐渐出现和光标闪烁的效果。

最关键的部分是定义了.fade-in-words > span选择器，通过display:inline-block属性将文字拆分为单个的行内块级元素，并设置初始opacity为0，即透明状态。然后，我们使用另一个关键帧动画fadeInWords，控制单个文字的逐渐出现效果。在动画中，我们通过transform:translateY属性控制单个文字的垂直位置，从而实现逐个逐渐出现的效果。

通过这种方式，文字就会在页面加载后单个逐渐出现，并伴随着光标闪烁的效果。您可以通过修改动画效果的属性值来实现不同的效果。