如何使用 CSS 在 loader 中設定徽標？-css教學-PHP中文網

範例

Loader in CSS

Example of the most common form of loader in CSS

在載入器中新增徽標

演算法

結論

首頁

web前端

css教學

如何使用 CSS 在 loader 中設定徽標？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 24, 2023 pm 08:17 PM

要開始回答這個問題，我們首先需要建立一個「載入器」。任何通知使用者或訪客頁面正在載入並且需要幾秒鐘才能完成載入的動畫都稱為載入器。

大多數情況下，當網站檢索結果的時間過長時，載入器就會派上用場。如果某個特定網站沒有 CSS 載入器，使用者會認為它在載入過程中根本沒有回應。

因此，在網頁上新增 CSS 載入器會導致使用者分心或等待一段時間才能正確載入頁面。一個簡單的動畫不會給人留下網站沒有回應的印象，而是表明網站仍在檢索結果並且網頁將在幾秒鐘內準備就緒。

您可以使用 CSS 新增樣式、動畫或任何其他形式的樣式來建立載入程式。

範例

我們現在將使用 CSS 建立網路上最常見的載入程式形式。

<!DOCTYPE html>
<html>
<head>
   <title>Example of a loader using CSS</title>
   <style>
      h1 {
         color: rgb(0, 128, 111);
      }
      .loader {
         display: block;
         position: absolute;
         width: 15px;
         height: 15px;
         left: calc(50% - 1.25em);
         border-radius: 1.25em;
         transform-origin: 1.25em 2.25em;
         animation: rotateAnimation;
         animation-iteration-count: infinite;
         animation-duration: 1.85s;
      }
      @keyframes rotateAnimation {
         from {
            transform: rotateZ(0deg);
         }
         to {
            transform: rotateZ(360deg);
         }
      }
      .item1 {
         animation-delay: 0.12s;
         background-color: #1b7842;
      }
      .item2 {
         animation-delay: 0.22s;
         background-color: #239b53;
      }
      .item3 {
         animation-delay: 0.32s;
         background-color: #2ecc72;
      }
      .item4 {
         animation-delay: 0.42s;
         background-color: #82e0a0;
      }
      .item5 {
         animation-delay: 0.52s;
         background-color: #d5f5de;
      }
   </style>
</head>
<body>
   <center>
      <h1 id="Loader-in-CSS">Loader in CSS</h1>
      <h4 id="Example-of-the-most-common-form-of-loader-in-CSS">Example of the most common form of loader in CSS</h4>
      <div>
         <div class="loader item1"></div>
         <div class="loader item2"></div>
         <div class="loader item3"></div>
         <div class="loader item4"></div>
         <div class="loader item5"></div>
      </div>
   </center>
</body>
</html>

登入後複製

範例

這是另一種形式的在水平軸上動畫的載入程式。

<!DOCTYPE html>
<html>
<head>
   <title>Example of a loader using CSS</title>
   <style>
      h1 {
         color: rgb(0, 128, 111);
      }
      .loader {
         display: block;
         position: absolute;
         width: 150px;
         height: 15px;
         left: calc(58% - 5.25em);
         transform-origin: 2px 20px;
         animation: rotateAnimation;
         animation-iteration-count: infinite;
         animation-duration: 2.85s;
      }
      @keyframes rotateAnimation {
         from {
            transform: rotateY(55deg);
         }
         to {
            transform: rotateY(360deg);
         }
      }
      .item1 {
         animation-delay: 0.12s;
         background-color: #1b7842;
      }
      .item2 {
         animation-delay: 0.22s;
         background-color: #239b53;
      }
      .item3 {
         animation-delay: 0.32s;
         background-color: #2ecc72;
      }
      .item4 {
         animation-delay: 0.42s;
         background-color: #82e0a0;
      }
      .item5 {
         animation-delay: 0.52s;
         background-color: #d5f5de;
      }
   </style>
</head>
<body>
   <center>
      <h1 id="Loader-in-CSS">Loader in CSS</h1>
      <h4 id="Example-of-the-most-common-form-of-loader-in-CSS">Example of the most common form of loader in CSS</h4>
      <div>
         <div class="loader item1"></div>
         <div class="loader item2"></div>
         <div class="loader item3"></div>
         <div class="loader item4"></div>
         <div class="loader item5"></div>
      </div>
   </center>
 </body>
</html>

登入後複製

在載入器中新增徽標

現在我們知道如何在 CSS 中製作載入器，現在我們將繼續討論如何在剛剛建立的載入器中新增徽標。

讓我們先嘗試理解為什麼我們可能需要在載入器內新增徽標。標誌是品牌的標記和身份，品牌為使用者體驗增添了個人風格。如今，所有網站都使用個人化載入程序，每當用戶登陸其網站時，都會對其品牌產生積極影響。

演算法

我們將遵循創建嵌入徽標的載入程式的演算法如下 -

第 1 步- 為了包含我們的載入程序，我們將建立一個 HTML 檔案並將 HTML div 添加到該文件的正文中。
第 2 步 - 為了提供我們的標誌和載入器動畫效果，我們將編寫 CSS 檔案或使用樣式標籤嵌入它。
第 3 步 - 使用 div 標籤中的標籤插入徽標，以便它現在顯示在載入器類別中

下面給出了我們可以用於載入程式的屬性 -

我們會根據Logo客製化邊框、顏色、高度、寬度，大幅提升整體一致性，增加品牌原創性。
要加入逐漸變化的動畫，我們將利用 CSS 中的 @keyframes 規則。
然後，為了讓載入器旋轉，我們將使用 CSS 的 Transform 屬性。

我們將設計徽標圖像的尺寸，使其小於或等於裝載機的尺寸。我們將添加相反方向的動畫樣式，以抵消徽標旋轉的效果。

範例

下面是一個使用上述演算法為網站添加載入程式的範例。

<!DOCTYPE html>
<html lang="en">
<head>
   <style type="text/css">
      .loaderClass {
         border: 12px solid #dcd7d7;
         border-top: 12px solid #04802f;
         border-radius: 50%;
         width: 120px;
         height: 120px;
         animation: SpinLoader 2.5s linear infinite;
      }
      .loaderClass img {
         height: 120px;
         width: 120px;
         border-radius: 50%;
         animation: LogoModify 2.5s linear infinite;
      }
      @keyframes SpinLoader {
         0% {
            transform: rotate(0deg);
         }
         100% {
            transform: rotate(360deg);
         }
      }
      @keyframes LogoModify {
         0% {
            transform: rotate(360deg);
         }
         100% {
            transform: rotate(0deg);
         }
      }
   </style>
</head>
<body>
   <div class="loaderClass">
      <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/887/227/169555783454341.jpg"  class="lazy" alt="如何使用 CSS 在 loader 中設定徽標？">
   </div>
</body>
</html>

登入後複製

結論

總而言之，使用 CSS 在載入器中設定徽標是一項簡單的任務。您需要做的就是設定徽標的寬度和高度，然後使用“背景圖像”屬性將其新增為載入程式的背景圖像。您也可以使用「background-position」或「margin」屬性來調整其位置，並使用其他樣式選項（如邊框、框陰影等）進一步自訂它。憑藉 CSS 的一些基本知識，您可以輕鬆創建帶有徽標的漂亮加載程序。時間！

以上是如何使用 CSS 在 loader 中設定徽標？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn