資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學使用 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 度。使用者可以在輸出中觀察到旋轉的載入程式，中間顯示載入文字。
<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 元素中。之後，我們使用“animate”關鍵幀來為所有字元設定動畫。“animate”關鍵幀中，我們更改字元的垂直位置。
此外，我們使用“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
在下面的示例中，我們在載入文字上添加了模糊效果。在這裡，我們將“loading”一詞的每個字元都新增到單獨的“span”元素中。之後，我們使用“n-th-child()”CSS 方法逐個訪問每個 span 元素以新增動畫。在 span 元素中，我們添加了“blur-text”動畫，並設定了特定的動畫延遲。
在動畫關鍵幀中，我們對文字應用模糊濾鏡，以顯示載入文字上的執行模糊效果。
<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 種不同的載入動畫型別。在第一個示例中，我們建立了帶有文字的旋轉載入指示器。在第二個示例中，我們建立了載入條。此外，在第三個示例中，我們建立了跳動的載入文字，在最後一個示例中，我們在文字中添加了模糊效果。
瀏覽量：1K+
