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