如何使用HTML和CSS創(chuàng)建動(dòng)畫加載器環(huán)？-魔扣目錄

概述

加載器是一個(gè)幾乎所有 Web 應(yīng)用程序都使用的 Web 組件。要構(gòu)建加載器環(huán)，我們應(yīng)該對(duì)級(jí)聯(lián)樣式表 (CSS) 有一些先驗(yàn)知識(shí)，因?yàn)?CSS 涉及加載器環(huán)的樣式和動(dòng)畫部分。由于加載器組件是在原始內(nèi)容加載到網(wǎng)頁之前加載的。用于構(gòu)建此功能的主要樣式屬性是動(dòng)畫、過渡和關(guān)鍵幀。這三個(gè) CSS 屬性將使一個(gè)簡(jiǎn)單的靜態(tài)動(dòng)畫加載環(huán)變成動(dòng)畫加載環(huán)。

算法

步驟 1 – 在文件夾中創(chuàng)建一個(gè) HTML 文件并使用文本編輯器打開它。將 HTML 樣板添加到 HTML 文件中。

第 2 步???在HTML文檔的body標(biāo)簽中創(chuàng)建一個(gè)HTML父div容器，類名為“l(fā)oading”。

<div class="loading"></div>

登錄后復(fù)制

第 3 步???創(chuàng)建一個(gè)子 div 容器，它是主加載器環(huán)，類名為“Loader”。

<div class="loader"></div>

登錄后復(fù)制

第 4 步??創(chuàng)建一個(gè) p 標(biāo)簽，其中包含文本“Loading”。

<p>Loading ....</p>

登錄后復(fù)制

第 5 步?? 現(xiàn)在創(chuàng)建一個(gè) style.css 文件并將該文件鏈接到 HTML 文檔。

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

登錄后復(fù)制

第 6 步?? 現(xiàn)在設(shè)置 HTML 元素的樣式并使加載程序在網(wǎng)頁中響起。

body {
   margin: 0;
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

p {
   font-family: 'Segoe UI';
}

登錄后復(fù)制

第 7 步???以加載器類為目標(biāo)，并使用邊框半徑制作邊框，從而制作類似環(huán)形框架的結(jié)構(gòu)。

.loader {
   border: 10px solid #d6d6d6;
   border-radius: 50%;
   border-top: 10px solid #5bdb34;
   width: 50px;
   height: 50px;
}

登錄后復(fù)制

第 8 步???將動(dòng)畫屬性添加到加載器元素，動(dòng)畫名稱為“l(fā)ring”，并包含動(dòng)畫持續(xù)時(shí)間和迭代次數(shù)。

.loader {
   border: 10px solid #d6d6d6;
   border-radius: 50%;
   border-top: 10px solid #5bdb34;
   width: 50px;
   height: 50px;
   animation: lring 1s linear infinite;
}

登錄后復(fù)制

步驟 9?? 現(xiàn)在創(chuàng)建關(guān)鍵幀屬性并定位上述動(dòng)畫并將動(dòng)畫設(shè)置到元素。

@keyframes lring {
   0% {
      transform: rotate(0deg);
   }
   
   100% {
      transform: rotate(360deg);
   }
}

登錄后復(fù)制

第 10 步???動(dòng)畫加載環(huán)已成功創(chuàng)建。

示例

在此示例中，我們使用簡(jiǎn)單的 HTML 和 CSS 動(dòng)畫屬性創(chuàng)建了一個(gè)動(dòng)畫加載環(huán)功能組件。為了實(shí)現(xiàn)這一點(diǎn)，我們創(chuàng)建了兩個(gè)文件，第一個(gè)文件為index.html，它是加載器環(huán)的布局或框架，另一個(gè)文件是style.css文件，它是加載器環(huán)的樣式和工作。

<html>
<head>
   <title>loading ring</title>
   <link rel="stylesheet" href="style.css">
   <style>
      body {
         margin: 0;
         width: 100%;
         height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
      }

      p {
         font-family: 'Segoe UI';
      }

      .loader {
         border: 10px solid #d6d6d6;
         border-radius: 50%;
         border-top: 10px solid #5bdb34;
         width: 50px;
         height: 50px;
         animation: lring 1s linear infinite;
      }
      
      @keyframes lring {
         0% {
            transform: rotate(0deg);
         }
      
         100% {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
<body>
   <div class="loading">
      <div class="loader"></div>
      <p>Loading ....</p>
   </div>
</body>
</html>

登錄后復(fù)制

結(jié)論

上述功能用于所有網(wǎng)絡(luò)或移動(dòng)應(yīng)用程序。由于上面創(chuàng)建的只是一個(gè)組件，我們可以通過使用 API 獲取數(shù)據(jù)或本地?cái)?shù)據(jù)將此功能組件嵌入到實(shí)時(shí)工作應(yīng)用程序中，因此當(dāng)網(wǎng)絡(luò)數(shù)據(jù)尚未加載到我們的網(wǎng)頁時(shí)，我們可以在屏幕上顯示動(dòng)畫加載環(huán) 一旦數(shù)據(jù)加載，我們就會(huì)用網(wǎng)站內(nèi)容替換加載環(huán)。我們還可以構(gòu)建各種設(shè)計(jì)的動(dòng)畫負(fù)載。

以上就是如何使用HTML和CSS創(chuàng)建動(dòng)畫加載器環(huán)？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！