使用 CSS 实现加载文本动画效果

如今，动画是应用程序中最强大的功能，它可以吸引更多用户，并增加用户探索应用程序的兴趣。在 Web 应用程序中，我们可以使用 HTML 和 CSS 创建动画。但是，我们也可以使用 JavaScript 创建动画，但这会使网站速度变慢。

在本教程中，我们将学习如何使用 HTML 和 CSS 创建加载文本动画。在从 API 获取数据或加载网页时显示带有动画的加载文本，使其更具吸引力非常重要。

示例 1

在下面的示例中，我们在其中创建了“loader” div 和“loader-inner” div 元素。在 CSS 中，我们为 loader div 设置了固定尺寸，并使用“rotation”关键帧添加了动画。我们将动画时间设置为 3 秒。

此外，我们还为 loader-inner div 元素设置了 rotation-inner 关键帧，并在 loader div 元素内定位。

在“rotation”和“rotation-inner”关键帧中，我们将加载程序从 0 度移动到 360 度。用户可以在输出中观察到旋转的加载程序，中间显示加载文本。

Open Compiler
<html>
<head>
   <style>
      .loader {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         border: 6px dotted green;
         position: relative;
         animation: rotation 3s linear infinite;
      }
      .loader-inner {
         position: absolute;
         width: 70px;
         height: 70px;
         border-radius: 50%;
         border-block: 6px solid yellow;
         top: 10px;
         left: 10px;
         animation: rotation-inner 3s linear infinite;
      }
      .loader-text {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
      }
      @keyframes rotation {
         from { transform: rotate(0deg);}
         to { transform: rotate(360deg);}
      }
      @keyframes rotation-inner {
         from { transform: rotate(0deg);}
         to {transform: rotate(360deg);}
      }
   </style>
</head>
<body>
   <h2>Creating the <i> Loading text animation using the CSS </i></h2>
   <div class = "loader">
      <div class = "loader-inner"> </div>
      <div class = "loader-text"> Loading </div>
   </div>
</body>
</html>

示例 2

在下面的示例中，我们创建了加载条。在这里，我们创建了 loader div 元素和位于其中的 bar div 元素。我们在 CSS 中为 loader div 元素设置了尺寸，并为 bar 元素设置了动画。

我们使用“bar-animation”关键帧进行动画。“bar-animation”中，我们更改 div 元素的宽度，使其看起来像加载条。

Open Compiler
<html>
<head>
   <style>
      .container { width: 200px; }
      .loader {
         width: 200px;
         height: 15px;
         position: relative;
         overflow: hidden;
         border: 2px solid blue;
         border-radius: 5px;
      }
      .bar {
         width: 0%;
         height: 100%;
         background-color: green;
         animation: bar-animation 5s ease-in-out infinite;
      }
      span {
         font-size: 1.3rem;
         display: flex;
         justify-content: center;
         color: green;
      }
      @keyframes bar-animation {
         0% {width: 0%;}
         50% {width: 100%;}
         100% {width: 0%;}
      }
   </style>
</head>
<body>
   <h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
   <div class = "container">
      <div class = "loader">
         <div class = "bar"> </div>
      </div>
      <span> Loading </span>
   </div>
</body>
</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例 3

在下面的示例中，我们创建了跳动的加载文本。在这里，我们将“Loading”一词的每个字符都添加到单独的 div 元素中。之后，我们使用“animate”关键帧来为所有字符设置动画。“animate”关键帧中，我们更改字符的垂直位置。

此外，我们使用“n-th-child()”方法逐个访问所有 div 元素并设置动画延迟。在输出中，用户可以观察到跳动的加载文本。

Open Compiler
<html>
<head>
   <style>
      .char {
         font-size: 44px;
         color: blue;
         display: inline-block;
         transition: all 0.9s;
         animation: animate 1.5s infinite;
      }
      .char:nth-child(1) {animation-delay: 0.1s;}
      .char:nth-child(2) {animation-delay: 0.3s;}
      .char:nth-child(3) {animation-delay: 0.4s;}
      .char:nth-child(4) {animation-delay: 0.5s;}
      .char:nth-child(5) {animation-delay: 0.6s;}
      .char:nth-child(6) {animation-delay: 0.8s;}
      .char:nth-child(7) {animation-delay: 0.9s;}
      .char:nth-child(8) {animation-delay: 1s;}
      .char:nth-child(9) {animation-delay: 1.2s;}
      .char:nth-child(10) {animation-delay: 1.4s;}
      @keyframes animate {
         0% {transform: translateY(0);}
         40% {transform: translateY(-20px);}
         100% {transform: translateY(0);}
      }
   </style>
</head>
<body>
   <h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
   <div class="allLetters">
      <div class = "char"> L </div>
      <div class = "char"> o </div>
      <div class = "char"> a </div>
      <div class = "char"> d </div>
      <div class = "char"> i </div>
      <div class = "char"> n </div>
      <div class = "char"> g </div>
      <div class = "char"> . </div>
      <div class = "char"> . </div>
      <div class = "char"> . </div>
   </div>
</body>
</html>

示例 4

在下面的示例中，我们在加载文本上添加了模糊效果。在这里，我们将“loading”一词的每个字符都添加到单独的“span”元素中。之后，我们使用“n-th-child()”CSS 方法逐个访问每个 span 元素以添加动画。在 span 元素中，我们添加了“blur-text”动画，并设置了特定的动画延迟。

在动画关键帧中，我们对文本应用模糊滤镜，以显示加载文本上的运行模糊效果。

Open Compiler
<html>
<head>
   <style>
      span {font-size: 2rem; color: green;}
      /* adding blur animation effect on each character of loading text one by one */
      span:nth-child(1){animation: blur-text 4s ease-in-out infinite;}
      span:nth-child(2){animation: blur-text 4s ease-in-out infinite 0.3s;}
      span:nth-child(3){animation: blur-text 4s ease-in-out infinite 0.5s;}
      span:nth-child(4){animation: blur-text 4s ease-in-out infinite 0.9s;}
      span:nth-child(5){animation: blur-text 4s ease-in-out infinite 1.3s;}
      span:nth-child(6){animation: blur-text 4s ease-in-out infinite 1.6s;}
      span:nth-child(7){animation: blur-text 4s ease-in-out infinite 2s;}
      @keyframes blur-text {
         0% {filter: blur(0px);}
         50% {filter: blur(4px);}
         100% {filter: blur(0px);}
      }
   </style>
</head>
<body>
   <h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
   <div class = "allLetters">
      <span> L </span>
      <span> O </span>
      <span> A </span>
      <span> D </span>
      <span> I </span>
      <span> N </span>
      <span> G </span>
   </div>
</body>
</html>

在本教程中，用户学习了 4 种不同的加载动画类型。在第一个示例中，我们创建了带有文本的旋转加载指示器。在第二个示例中，我们创建了加载条。此外，在第三个示例中，我们创建了跳动的加载文本，在最后一个示例中，我们在文本中添加了模糊效果。

更新于：2023年5月3日

浏览量：1K+

开启您的职业生涯

完成课程获得认证

开始学习
广告