要開始回答這個問題，我們首先需要創建一個“加載器”。任何通知用戶或訪問者頁面正在加載并且需要幾秒鐘才能完成加載的動畫都稱為加載器。
大多數情況下，當網站檢索結果的時間過長時，加載器就會派上用場。如果某個特定網站沒有 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 文件或使用樣式標簽嵌入它。
第 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="https://img.php.cn/upload/article/000/887/227/169555783454341.jpg" alt="logoImage">
</div>
</body>
</html>
登錄后復制
結論
總而言之，使用 CSS 在加載器中設置徽標是一項簡單的任務。您需要做的就是設置徽標的寬度和高度，然后使用“背景圖像”屬性將其添加為加載程序的背景圖像。您還可以使用“background-position”或“margin”屬性來調整其位置，并使用其他樣式選項（如邊框、框陰影等）進一步自定義它。憑借 CSS 的一些基本知識，您可以輕松創建帶有徽標的漂亮加載程序。時間！
以上就是如何使用 CSS 在 loader 中設置徽標？的詳細內容，更多請關注www.92cms.cn其它相關文章！
