資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 旋轉形狀載入動畫？
在本文中，我們將瞭解如何使用 CSS 旋轉形狀載入動畫。不同形狀的載入動畫是 Web 應用的重要組成部分，因為它可以幫助使用者在等待網站載入時保持參與度。可以向網頁或應用程式新增多種動畫，其中一種流行的載入動畫型別是旋轉形狀載入器。這種動畫具有良好的特性，其中一個形狀會持續旋轉，直到網頁完全載入。
接下來，我們將使用不同的方法來旋轉形狀載入動畫，並提供不同的示例。
方法
我們使用 CSS 旋轉形狀載入動畫的方法包含多個步驟。讓我們詳細討論這些步驟以旋轉形狀載入動畫。
步驟 1：建立一個帶有類的 div
第一步是為要旋轉的形狀建立 HTML 標記。目前，我們使用一個簡單的 div 元素和一個名為 loader 的類名來建立一個形狀。
<div class="loader"></div>
步驟 2：新增 CSS 樣式
讓我們建立一個具有某些寬度和高度的載入器 -
.loader {
width: 50px;
height: 50px;
}
步驟 3：建立形狀
現在我們需要新增要旋轉的形狀。在本例中，我們將使用一個圓形。我們可以使用 border-radius 屬性來建立圓形。我們還可以設定邊框和邊框顏色，以使圓形具有純色。
.loader {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid #0055ff;
border-top-color: transparent;
}
步驟 4：新增動畫
要建立旋轉動畫，我們可以使用 CSS animation 屬性。我們可以使用 @keyframes 規則建立關鍵幀動畫。在本例中，我們將使用 360 度旋轉動畫。
.loader {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid #0055ff;
border-top-color: transparent;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
步驟 5：一些附加內容
<div class="loader-container">
<div class="loader"></div>
<p>Loading...</p>
</div>
.loader-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
p {
font-size: 18px;
margin-top: 20px;
}
loader-container 元素設定為 display 為 flex，justify-content 和 align-items 設定為 center 以將載入器元素居中在頁面上。flex-direction 設定為 column，高度設定為 100vh 以使 loader-container 元素填充視口的高度。
示例 1
在第一種方法中，我們使用了容器元素，一個帶有 loader-container 類的 div 來居中載入器並在其下方顯示載入文字。如果您想與載入器一起顯示其他內容（例如頁面正在載入的訊息），此方法很有用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotating Shape Loader Animation</title>
<style>
.loader-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
.loader {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid #0055ff;
border-top-color: transparent;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
p {
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="loader-container">
<div class="loader"></div>
<p>Loading...</p>
</div>
</body>
</html>
輸出
在本例中，我們建立了一個基本的 HTML 文件，其中包含一個 title 標籤和一個用作載入器容器的單個 div 元素。在該容器內，我們添加了一個帶有 "loader" 類的 div 元素，該元素將是我們旋轉的形狀。
我們還向 loader 和 loader-container 元素添加了一些 CSS 樣式。載入器被賦予了寬度和高度，以及形成圓形的邊框。border-top-color 設定為透明，因此我們只能看到圓形的四分之三。我們還在 loader 元素中添加了一個 animation 屬性，該屬性使用我們定義的 "rotation" 關鍵幀來建立旋轉動畫。
loader-container 元素設定為 display 為 flex，justify-content 和 align-items 設定為 center，這會將載入器元素居中在頁面上。我們還在載入器下方添加了一些文字，以告知使用者頁面仍在載入。
示例 2
在本例中，我們只是使用了一個元素，一個帶有 loader 類的 div 來建立載入動畫。該示例使用了一種更加簡約的方法，完全專注於載入器本身。如果您想要一個簡單幹淨的載入動畫，而不需要額外內容，這將非常有用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotating Square Loader Animation</title>
<style>
.loader {
width: 60px;
height: 60px;
background-color: #0055ff;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>
輸出
在本例中，我們已從 loader 元素中刪除了 border 和 border-radius 屬性，而是為其提供了 60 畫素的寬度和高度，以及藍色 (#0055ff) 的背景顏色。
我們保留了關鍵幀動畫，在 1 秒內將載入器元素從 0 旋轉到 360 度。這會建立一個與之前的圓形載入器示例略有不同的旋轉正方形載入動畫。
您可以嘗試不同的形狀、顏色和動畫持續時間，以自定義載入動畫以適應您的網站設計。
結論
在本文中，我們看到了兩種 CSS 方法，它們使用相同的關鍵幀動畫來旋轉 HTML 中的載入器元素。如果我們談論兩者之間的主要區別，那麼這將顯示載入器元素的樣式，就像在我們的第一種方法中，我們使用了邊框和 border-radius 來建立圓形，而在第二種方法中則使用背景顏色來建立正方形。
最後，選擇使用哪個示例取決於具體的需要和偏好。如果需要與載入器一起顯示其他內容，我們可以使用第一種方法，因為它更適合；如果需要新增一個簡約的載入動畫，那麼第二種方法將成為一個不錯的選擇。
2K+ 瀏覽量
