在网页设计中，CSS 动画用于提高用户体验，吸引用户的关注，并且在不影响页面性能的情况下增加视觉上的趣味性。文字加载动画是一种常见且有趣的效果，可以在文本出现时给予用户一种动态的视觉感受。

为了实现这种效果，我们可以利用 CSS3 提供的动画属性。这里将提供一个简单但实用的示例：模拟打字机效果的文字加载动画。

HTML 结构

首先，创建一个 HTML 结构来容纳我们的文本。

<div class="typewriter">
  <h1>欢迎来到我的网站!</h1>
</div>

CSS 样式与动画

接着是 CSS 部分，我们将定义光标的样式以及文本出现的动画效果。

.typewriter h1 {
  overflow: hidden; /* 确保在动画开始时隐藏文本 */
  border-right: .15em solid orange; /* 光标样式 */
  white-space: nowrap; /* 保持文本不换行 */
  margin: 0 auto; /* 居中对齐文本 */
  letter-spacing: .15em; /* 调整字母间距 */
  animation: typing 3.5s steps(40, 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; }
}

上面的 CSS 规则实现了如下几个关键点：

1. .typewriter h1 应用了 overflow: hidden 属性确保文字最开始是隐藏的。
2. 光标（模拟打字机效果中的闪烁光标）通过 border-right 设为一个固定宽度的块，并且通过动画 blink-caret 来控制其闪烁效果。
3. 使用 animation 对文字的显示应用了 typing 动画，steps 函数指定步骤，使得动画表现得像是逐字显示，实现打字机的效果。
4. blink-caret 动画则是通过改变 border-color 的透明度来实现光标的闪烁。

效果

当这段代码运行在浏览器中时，用户会看到一个模拟打字机的动画效果，文本像是在逐字被打出，同时伴随着闪烁的光标。

这个文本加载动画简单而有趣，可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数，或者光标颜色等，来适应特定的设计需求。使用这种动态元素，增强网站的互动性和用户体验，同时也为网站增添了一抹活泼的风格。

云服务器/高防CDN推荐

蓝易云国内/海外高防云服务器推荐

免备案五网CN2云服务器：www.tsyvps.com

蓝易云安全企业级高防CDN：www.tsycdn.com

持有增值电信营业许可证：B1-20222080【资质齐全】

蓝易云香港五网CN2 GIA/GT精品网络服务器。拒绝绕路，拒绝不稳定。