使用 CSS 載入文字動畫效果-css教學-PHP中文網

使用 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 載入文字動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！