如今,動畫是應用程式中吸引更多用戶最有力的功能,它增加了用戶探索應用程式的興趣。在 Web 應用程式中,我們可以使用 HTML 和 CSS 建立動畫。然而,我們可以使用 JavaScript 創建動畫,但這會使網站變慢。
在本教學中,我們將學習使用 HTML 和 CSS 來載入文字動畫。在從 API 取得資料或載入網頁時,用動畫顯示載入文字非常重要,以使其更具吸引力。
在下面的範例中,我們在其中建立了「loader」div 和「loader-inner」div 元素。在 CSS 中,我們為載入器 div 設定固定尺寸,並使用「旋轉」關鍵影格新增動畫。我們設定 3 秒的動畫時間。
此外,我們也為 loader-inner div 元素和 loader div 元素內的位置設定了內部旋轉關鍵影格。
在「旋轉」和「內部旋轉」關鍵影格中,我們將載入器從 0 度移動到 360 度。使用者可以在輸出中觀察旋轉載入器,中間有載入文字。
Creating the Loading text animation using the CSS
Loading
在下面的範例中,我們建立了載入欄。在這裡,我們在其中建立了 loader div 元素和 bar div 元素。我們已經在 CSS 中設定了 loader div 元素的尺寸和 bar 元素的動畫。
我們使用「bar-animation」關鍵影格來製作動畫。在「bar-animation」中,我們更改了 div 元素的寬度,使其像載入欄一樣。
Creating the Loading text animation using the CSS.
Loading
在下面的範例中,我們建立了彈跳載入文字。在這裡,我們將 Loading 單字的每個字元新增到單獨的 div 元素中。之後,我們使用“動畫”關鍵影格來為所有角色製作動畫。在「動畫」關鍵影格中,我們會改變角色的垂直位置。
此外,我們還使用了「n-th-child()」方法來一一存取所有 div 元素並設定動畫延遲。在輸出中,使用者可以觀察彈跳的載入文字。
Creating the Loading text animation using the CSS.
Loading...
在下面的範例中,我們在載入文字上新增了模糊效果。在這裡,我們在單獨的“span”元素中添加了加載詞的每個字元。之後,我們使用‘n-th-child()’CSS方法一一存取每個span元素來新增動畫。在 span 元素中,我們添加了具有特定動畫延遲量的「模糊文字」動畫。
在動畫關鍵影格中,我們對文字套用模糊濾鏡,以在載入文字上顯示運行模糊效果。
Creating the Loading text animation using the CSS.
L O A D I N G
用戶在本教程中學習了 4 種不同類型的載入動畫。在第一個範例中,我們建立了帶有文字的旋轉載入指示器。在第二個範例中,我們建立了載入欄。此外,在第三個範例中,我們創建了彈跳加載文本,在最後一個範例中,我們為文本添加了模糊效果。
以上是使用 CSS 載入文字動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!