資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學使用 CSS 建立高階載入畫面
在瀏覽網站的不同頁面時，開發者務必新增載入畫面，以便網站有足夠的時間在網頁之間切換。載入畫面是一種有效的方法，使用者可以在網站頁面載入/初始化時等待。
如何建立載入畫面？
要建立載入畫面，我們可以使用 HTML 和 CSS。首先，我們將建立一個 div 元素，其中包含一個顯示百分比的標題標籤。
然後，我們將使用 CSS 屬性（如 border-radius）來設定高度和寬度，並向載入元素新增動畫。我們還將使用 overflow 屬性來隱藏元素，以便我們只能看到主要內容。
語法
以下是 overflow 屬性的語法：
p {
overflow: hidden/ visible/ scroll/ auto;
}
在上面的語法中，您可以看到與 overflow 屬性一起使用的值可以是隱藏元素的 hidden 值，使元素可見的 visible 值，以及新增滑塊同時隱藏元素的 scroll 屬性。
讓我們來看一個例子，以便更好地理解載入畫面。
示例
在下面的程式碼中，我們聲明瞭標題標籤和一個 div 容器，我們在其中建立了載入容器，然後為其填充顏色並新增動畫。之後，我們在容器中添加了第二個標題來顯示百分比和一個旋轉 360 度的 keyframes 函式。讓我們看看程式碼的輸出。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Loading Screen</title>
<style>
body {
background-color: #111;
}
h2 {
color: white;
text-align: center;
margin: 20px 0;
font-size: 70px;
}
.screen {
height: 250px;
margin: auto;
border-radius: 50%;
position: relative;
width: 250px;
top: 20%;
border: 4px solid #DDD;
overflow: hidden;
}
@keyframes rotate {
to {
transform: rotate(358deg);
}
}
.screen::after {
content: "";
position: absolute;
top: 25%;
left: -50%;
height: 300%;
width: 200%;
nimation: rotate 10s linear forwards infinite;
background-color: blue;
border-radius: 50%;
box-shadow: 0 3 10px #4CAF50;
opacity: 0.9;
}
h3 {
color: white;
font-size: 70px;
text-align: center;
position: relative;
top: 14%;
}
</style>
</head>
<body>
<h2>Loading Screen</h2>
<div class="screen">
<h3>50%</h3>
</div>
</body>
</html>
在上面的輸出中，您可以看到我們首先宣告的標題標籤，然後是添加了顏色的容器，該容器顯示我們的第二個標題和容器中的動畫。動畫旋轉 360 度，位於百分比標題上方。
示例
以下是另一個建立高階載入畫面的示例。在下面的示例中，我們聲明瞭一個 div 元素，然後為其指定一個類，以便使用 CSS 屬性對其進行樣式設定。我們在邊框中添加了黑色和紅色，併為其添加了動畫，並使用 keyframes 函式使容器旋轉 360 度。上面的程式碼演示瞭如何在網頁中新增載入畫面。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of the advanced loading screen</title>
<style>
@keyframes spin {
100% {
transform: rotate(359deg);
}
0% {
transform: rotate(0deg);
}
}
.load {
border-bottom: 14px solid black;
border-right: 14px solid red;
border-left: 14px solid red;
border-top: 14px solid black;
border-radius: 49%;
width: 120px;
animation: spin 3s linear infinite;
height: 120px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="load"></div>
</body>
</html>
在輸出中，您可以看到兩種顏色旋轉 360 度，給使用者一種頁面正在載入的印象。您可以使用對齊屬性將載入器對齊到頁面的中心。
注意 - keyframes 屬性是 CSS 的一個屬性，它使開發者能夠動畫化 HTML 元素，而且無需使用 JavaScript，這些 keyframes 指定了元素將具有的樣式。
keyframes 屬性指定動畫執行的時間量，使用的過渡應該平滑且準確。應指定百分比，並且開發者必須確保動畫與所有瀏覽器相容。
結論
網頁開發者使用不同型別的樣式和動畫來建立載入畫面，具體取決於他們正在處理的專案。使載入畫面有所不同並付出創造性的努力至關重要，因為使用者通常會因載入畫面的外觀和頁面載入時間而分心。這些載入畫面的主要目標是使網站具有互動性，而不是在頁面載入/初始化需要很長時間時讓使用者感到厭煩。
860 次瀏覽
