首頁 >web前端 >css教學 >使用 CSS 建立進階載入畫面

使用 CSS 建立進階載入畫面

WBOY轉載: 2023-09-17 23:13:02580瀏覽

使用 CSS 创建高级加载屏幕

在瀏覽網站中的不同頁面時，開發人員必須在網站上新增載入畫面；以便網站有足夠的時間在網頁之間進行遍歷。載入畫面是一種有效的方法，使用者可以在網站頁面載入/初始化時等待。

如何建立載入畫面？

要建立一個載入畫面，我們可以使用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 建立進階載入畫面的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html overflow border

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：使用 CSS 設定框的最小寬度下一篇：使用 CSS 設定框的最小寬度

看更多