使用 CSS 加载文本动画效果

百变鹏仔 4个月前 (09-20) #CSS

文章标签加载

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

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

示例 1

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

此外，我们还为 loader-inner div 元素和 loader div 元素内的位置设置了内部旋转关键帧。

立即学习“前端免费学习笔记（深入）”；

在“旋转”和“内部旋转”关键帧中，我们将加载器从 0 度移动到 360 度。用户可以在输出中观察旋转加载器，中间有加载文本。

<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 元素的宽度，使其像加载栏一样。

<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>

示例 3

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

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

<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

在下面的示例中，我们在加载文本上添加了模糊效果。在这里，我们在单独的“span”元素中添加了加载词的每个字符。之后，我们使用‘n-th-child()’CSS方法一一访问每个span元素来添加动画。在 span 元素中，我们添加了具有特定动画延迟量的“模糊文本”动画。

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

<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 种不同类型的加载动画。在第一个示例中，我们创建了带有文本的旋转加载指示器。在第二个示例中，我们创建了加载栏。此外，在第三个示例中，我们创建了弹跳加载文本，在最后一个示例中，我们为文本添加了模糊效果。

文章推荐

使用 CSS 加载文本动画效果

示例 1

示例 2

示例 3

示例 4

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写