如今，动画是应用程序中吸引更多用户最有力的功能，它增加了用户探索应用程序的兴趣。在 Web 应用程序中，我们可以使用 HTML 和 CSS 创建动画。然而，我们可以使用 JavaScript 创建动画，但这会使网站变慢。
在本教程中，我们将学习使用 HTML 和 CSS 加载文本动画。在从 API 获取数据或加载网页时，用动画显示加载文本非常重要，以使其更具吸引力。
示例 1
在下面的示例中，我们在其中创建了“loader”div 和“loader-inner”div 元素。在 CSS 中，我们为加载器 div 设置固定尺寸，并使用“旋转”关键帧添加动画。我们设置 3 秒的动画时间。
此外，我们还为 loader-inner div 元素和 loader div 元素内的位置设置了内部旋转关键帧。
立即学习“前端免费学习笔记（深入）”；
在“旋转”和“内部旋转”关键帧中，我们将加载器从 0 度移动到 360 度。用户可以在输出中观察旋转加载器，中间有加载文本。
Creating the Loading text animation using the CSS
Loading
示例 2
在下面的示例中，我们创建了加载栏。在这里，我们在其中创建了 loader div 元素和 bar div 元素。我们已经在 CSS 中设置了 loader div 元素的尺寸和 bar 元素的动画。
我们使用“bar-animation”关键帧来制作动画。在“bar-animation”中，我们更改了 div 元素的宽度，使其像加载栏一样。
Creating the Loading text animation using the CSS.
Loading
示例 3
在下面的示例中，我们创建了弹跳加载文本。在这里，我们将 Loading 单词的每个字符添加到单独的 div 元素中。之后，我们使用“动画”关键帧来为所有角色制作动画。在“动画”关键帧中，我们更改角色的垂直位置。
此外，我们还使用了“n-th-child()”方法来一一访问所有 div 元素并设置动画延迟。在输出中，用户可以观察弹跳的加载文本。
Creating the Loading text animation using the CSS.
Loading...
示例 4
在下面的示例中，我们在加载文本上添加了模糊效果。在这里，我们在单独的“span”元素中添加了加载词的每个字符。之后，我们使用‘n-th-child()’CSS方法一一访问每个span元素来添加动画。在 span 元素中，我们添加了具有特定动画延迟量的“模糊文本”动画。
在动画关键帧中，我们对文本应用模糊滤镜，以在加载文本上显示运行模糊效果。
Creating the Loading text animation using the CSS.
L O A D I N G
用户在本教程中学习了 4 种不同类型的加载动画。在第一个示例中，我们创建了带有文本的旋转加载指示器。在第二个示例中，我们创建了加载栏。此外，在第三个示例中，我们创建了弹跳加载文本，在最后一个示例中，我们为文本添加了模糊效果。
