資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 在載入器中設定徽標？
要開始解決這個問題，我們首先需要建立一個“載入器”。任何通知使用者或訪問者頁面正在載入並且需要幾秒鐘才能完成載入的動畫都稱為載入器。
大多數情況下，當網站花費太長時間檢索結果時，載入器會派上用場。如果某個特定網站沒有 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>Loader in CSS</h1>
<h4>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>Loader in CSS</h1>
<h4>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 檔案或使用 style 標籤嵌入它。
步驟 3 - 使用 <img> 標籤在 div 標籤內插入徽標，以便它現在顯示在載入器類中
我們可以用於載入器的屬性如下：
我們將根據徽標自定義邊框、顏色、高度、寬度，這極大地提高了整體一致性併為品牌增添了獨創性。
為了新增逐漸變化的動畫，我們將使用 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="https://tutorialspoint.tw/static/images/client/science.svg" alt="logoImage">
</div>
</body>
</html>
結論
總之，使用 CSS 在載入器中設定徽標是一項簡單的任務。您只需設定徽標的寬度和高度，然後使用“background-image”屬性將其新增為載入器的背景影像。您還可以使用“background-position”或“margin”屬性調整其位置，並使用其他樣式選項（如邊框、陰影等）對其進行進一步自定義。只需掌握一些 CSS 基礎知識，您就可以輕鬆快速地建立帶有徽標的精美載入器！
3K+ 瀏覽量
