要開始回答這個問題，我們首先需要建立一個「載入器」。任何通知使用者或訪客頁面正在載入並且需要幾秒鐘才能完成載入的動畫都稱為載入器。
大多數情況下，當網站檢索結果的時間過長時，載入器就會派上用場。如果某個特定網站沒有 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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/887/227/169555783454341.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="如何使用 CSS 在 loader 中設定徽標？">
</div>
</body>
</html>
結論
總而言之，使用 CSS 在載入器中設定徽標是一項簡單的任務。您需要做的就是設定徽標的寬度和高度，然後使用“背景圖像”屬性將其新增為載入程式的背景圖像。您也可以使用「background-position」或「margin」屬性來調整其位置，並使用其他樣式選項（如邊框、框陰影等）進一步自訂它。憑藉 CSS 的一些基本知識，您可以輕鬆創建帶有徽標的漂亮加載程序。時間！
以上是如何使用 CSS 在 loader 中設定徽標？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
使您的第一個自定義苗條過渡Mar 15, 2025 am 11:08 AMSvelte Transition API提供了一種使組件輸入或離開文檔（包括自定義Svelte Transitions）時動畫組件的方法。
讓我們使用（x，x，x，x）來談論特殊性Mar 24, 2025 am 10:37 AM前幾天我只是和埃里克·邁耶（Eric Meyer）聊天，我想起了我成長時代的埃里克·邁耶（Eric Meyer）的故事。我寫了一篇有關CSS特異性的博客文章，以及
您如何使用CSS創建文本效果，例如文本陰影和漸變？Mar 14, 2025 am 11:10 AM文章討論了使用CSS來獲得陰影和漸變等文本效果，優化它們以進行性能並增強用戶體驗。它還列出了初學者的資源。（159個字符）
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
