在瀏覽網站中的不同頁面時，開發人員必須向網站添加加載屏幕；以便網站有足夠的時間在網頁之間進行遍歷。加載屏幕是一種有效的方法，用戶可以在網站頁面加載/初始化時等待。
如何創建加載屏幕？
要創建一個加載屏幕，我們可以使用HTML和CSS。首先，我們將創建一個div元素，在其中給出一個標題標簽，顯示百分比。
然后我們將使用 CSS 屬性（例如 border-radius）來指定高度和寬度，并向加載元素添加動畫。我們還將使用 over-flow 屬性來隱藏元素，以便我們只能看到主要內容。
語法
下面是overflow屬性的語法 –
p {
overflow: hidden/ visible/ scroll/ auto;
}
登錄后復制
在上述語法中，您可以看到與溢出屬性一起使用的值可以是隱藏元素的隱藏值，使元素可見的可見值以及在隱藏元素時添加滑塊的滾動屬性。
讓我們看一個示例以更好地理解加載屏幕。
示例
在下面給出的代碼中，我們聲明了標題標簽并聲明了一個div容器，在其中創建了我們的加載容器，然后填充了顏色并添加了動畫。之后，我們在容器中添加了第二個標題以顯示百分比，并添加了一個旋轉360度的關鍵幀函數。讓我們來看一下代碼的輸出。
<!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 度，給用戶一種頁面正在加載的印象。您可以使用align 屬性將加載器對齊到頁面的中心。
注意 – keyframe 屬性是 CSS 的一個屬性，它使開發人員能夠在不使用 JavaScript 的情況下對 HTML 元素進行動畫處理，并且這些關鍵幀指定該元素將具有的樣式。
關鍵幀屬性指定動畫必須運行的時間量，所使用的過渡應該平滑且準確。應指定百分比，并且開發人員必須確保動畫與所有瀏覽器兼容。
結論
Web 開發人員根據他們正在處理的項目使用不同類型的樣式和動畫來創建加載屏幕。讓加載屏幕有點不同，并為此付出創造性的努力是至關重要的，因為用戶通常會因加載屏幕的外觀和加載頁面所需的時間而分心。這些加載屏幕的主要目的是使網站具有交互性，并且不會在頁面需要花費大量時間來加載/啟動時讓用戶感到厭煩。
以上就是使用 CSS 創建高級加載屏幕的詳細內容，更多請關注www.92cms.cn其它相關文章！
