資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML 和 CSS 建立動畫載入環？
概述
載入器是幾乎所有 Web 應用程式都使用的 Web 元件。要構建載入環，我們應該對層疊樣式表 (CSS) 有一些預先的瞭解，因為 CSS 涉及載入環的樣式和動畫部分。由於載入器元件在原始內容載入到網頁之前載入。構建此功能將使用的一些主要樣式屬性是動畫、過渡和關鍵幀。這三個 CSS 屬性將使簡單的靜態動畫載入環變成動畫載入環。
演算法
步驟 1 − 在資料夾中建立一個 HTML 檔案，並使用文字編輯器開啟它。將 HTML 基本結構新增到 HTML 檔案中。
步驟 2 − 在 HTML 文件的 body 標籤中建立一個 HTML 父 div 容器，其類名為“loading”。
<div class="loading"></div>
步驟 3 − 建立一個子 div 容器，它是帶有類名“Loader”的主載入環。
<div class="loader"></div>
步驟 4 − 建立一個 p 標籤，其中包含文字“Loading”。
<p>Loading ....</p>
步驟 5 − 現在建立一個 style.css 檔案並將該檔案連結到 HTML 文件。
<link rel="stylesheet" href="style.css">
步驟 6 − 現在設定 HTML 元素的樣式，並在網頁中製作載入環。
body {
margin: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
p {
font-family: 'Segoe UI';
}
步驟 7 − 定位載入器類，並使用邊框半徑設定邊框，以便製作環形框架結構。
.loader {
border: 10px solid #d6d6d6;
border-radius: 50%;
border-top: 10px solid #5bdb34;
width: 50px;
height: 50px;
}
步驟 8 − 將動畫屬性新增到載入器元素，動畫名稱為“lring”，並設定動畫持續時間和迭代次數。
.loader {
border: 10px solid #d6d6d6;
border-radius: 50%;
border-top: 10px solid #5bdb34;
width: 50px;
height: 50px;
animation: lring 1s linear infinite;
}
步驟 9 − 現在建立關鍵幀屬性，並定位上述動畫，並將動畫設定到元素。
@keyframes lring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
步驟 10 − 動畫載入環已成功建立。
示例
在此示例中，我們使用簡單的 HTML 和 CSS 動畫屬性建立了一個動畫載入環功能元件。為此，我們建立了兩個檔案，第一個檔案是 index.html，它是載入環的佈局或框架，另一個檔案是 style.css，它是載入環的樣式和工作方式。
<html>
<head>
<title>loading ring</title>
<link rel="stylesheet" href="style.css">
<style>
body {
margin: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
p {
font-family: 'Segoe UI';
}
.loader {
border: 10px solid #d6d6d6;
border-radius: 50%;
border-top: 10px solid #5bdb34;
width: 50px;
height: 50px;
animation: lring 1s linear infinite;
}
@keyframes lring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loading">
<div class="loader"></div>
<p>Loading ....</p>
</div>
</body>
</html>
結論
上述功能用於所有 Web 或移動應用程式。由於上面建立的只是一個元件，我們可以透過使用 API 獲取資料或我們的本地資料將此功能元件嵌入到即時工作應用程式中，因此當 Web 資料未載入到我們的網頁時，我們可以在螢幕上顯示動畫載入環，一旦資料載入，我們將用網站內容替換載入環。我們還可以構建各種設計的動畫載入。
547 次檢視
