首頁  >  文章  >  web前端  >  如何使用HTML和CSS建立動畫載入器環?

如何使用HTML和CSS建立動畫載入器環?

WBOY
WBOY轉載
2023-09-23 16:25:021255瀏覽

如何使用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文件,它是載入器環的樣式和工作。 p>



   loading ring
   <link rel="stylesheet" href="style.css">
   


   
<div class="loader"></div> <p>Loading ....</p>

結論

上述功能用於所有網路或行動應用程式。由於上面創建的只是一個組件,我們可以透過使用API​​ 獲取數據或本地數據將此功能組件嵌入到實時工作應用程序中,因此當網絡數據尚未加載到我們的網頁時,我們可以在屏幕上顯示動畫加載環一旦資料加載,我們就會用網站內容替換加載環。我們還可以建立各種設計的動畫負載。

以上是如何使用HTML和CSS建立動畫載入器環?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除