在网页设计中，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 规则实现了如下几个关键点：
.typewriter h1应用了overflow: hidden属性确保文字最开始是隐藏的。- 光标（模拟打字机效果中的闪烁光标）通过
border-right设为一个固定宽度的块，并且通过动画blink-caret来控制其闪烁效果。 - 使用
animation对文字的显示应用了typing动画，steps函数指定步骤，使得动画表现得像是逐字显示，实现打字机的效果。 blink-caret动画则是通过改变border-color的透明度来实现光标的闪烁。
效果
当这段代码运行在浏览器中时，用户会看到一个模拟打字机的动画效果，文本像是在逐字被打出，同时伴随着闪烁的光标。
这个文本加载动画简单而有趣，可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数，或者光标颜色等，来适应特定的设计需求。使用这种动态元素，增强网站的互动性和用户体验，同时也为网站增添了一抹活泼的风格。
