要開(kāi)始回答這個(gè)問(wèn)題，我們首先需要?jiǎng)?chuàng)建一個(gè)“加載器”。任何通知用戶(hù)或訪問(wèn)者頁(yè)面正在加載并且需要幾秒鐘才能完成加載的動(dòng)畫(huà)都稱(chēng)為加載器。
大多數(shù)情況下，當(dāng)網(wǎng)站檢索結(jié)果的時(shí)間過(guò)長(zhǎng)時(shí)，加載器就會(huì)派上用場(chǎng)。如果某個(gè)特定網(wǎng)站沒(méi)有 CSS 加載器，用戶(hù)會(huì)認(rèn)為它在加載過(guò)程中根本沒(méi)有響應(yīng)。
因此，向網(wǎng)頁(yè)添加 CSS 加載器會(huì)導(dǎo)致用戶(hù)分心或等待一段時(shí)間才能正確加載頁(yè)面。一個(gè)簡(jiǎn)單的動(dòng)畫(huà)不會(huì)給人留下網(wǎng)站沒(méi)有響應(yīng)的印象，而是表明網(wǎng)站仍在檢索結(jié)果并且網(wǎng)頁(yè)將在幾秒鐘內(nèi)準(zhǔn)備就緒。
您可以使用 CSS 添加樣式、動(dòng)畫(huà)或任何其他形式的樣式來(lái)創(chuàng)建加載程序。
示例
我們現(xiàn)在將使用 CSS 創(chuàng)建互聯(lián)網(wǎng)上最常見(jiàn)的加載程序形式。
<!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>
登錄后復(fù)制
示例
這是另一種形式的在水平軸上動(dòng)畫(huà)的加載程序。
<!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>
登錄后復(fù)制
在加載器中添加徽標(biāo)
現(xiàn)在我們知道了如何在 CSS 中制作加載器，現(xiàn)在我們將繼續(xù)討論如何在剛剛創(chuàng)建的加載器中添加徽標(biāo)。
讓我們首先嘗試?yán)斫鉃槭裁次覀兛赡苄枰诩虞d器內(nèi)添加徽標(biāo)。徽標(biāo)是品牌的標(biāo)記和身份，品牌為用戶(hù)體驗(yàn)增添了個(gè)人風(fēng)格。如今，所有網(wǎng)站都使用個(gè)性化加載程序，每當(dāng)用戶(hù)登陸其網(wǎng)站時(shí)，都會(huì)對(duì)其品牌產(chǎn)生積極影響。
算法
我們將遵循創(chuàng)建嵌入徽標(biāo)的加載程序的算法如下 –
第 1 步– 為了包含我們的加載程序，我們將構(gòu)建一個(gè) HTML 文件并將 HTML div 添加到該文件的正文中。
第 2 步 – 為了提供我們的徽標(biāo)和加載器動(dòng)畫(huà)效果，我們將編寫(xiě) CSS 文件或使用樣式標(biāo)簽嵌入它。
第 3 步 – 使用 div 標(biāo)簽中的 標(biāo)簽插入徽標(biāo)，以便它現(xiàn)在顯示在加載器類(lèi)中
下面給出了我們可以用于加載程序的屬性 –
我們會(huì)根據(jù)Logo定制邊框、顏色、高度、寬度，大大提高整體一致性，增加品牌原創(chuàng)性。
要添加逐漸變化的動(dòng)畫(huà)，我們將利用 CSS 中的 @keyframes 規(guī)則。
然后，為了使加載器旋轉(zhuǎn)，我們將使用 CSS 的 Transform 屬性。
我們將設(shè)計(jì)徽標(biāo)圖像的尺寸，使其小于或等于裝載機(jī)的尺寸。我們將添加相反方向的動(dòng)畫(huà)樣式，以抵消徽標(biāo)旋轉(zhuǎn)的效果。
示例
下面是一個(gè)使用上述算法向網(wǎng)站添加加載程序的示例。
<!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>
登錄后復(fù)制
結(jié)論
總而言之，使用 CSS 在加載器中設(shè)置徽標(biāo)是一項(xiàng)簡(jiǎn)單的任務(wù)。您需要做的就是設(shè)置徽標(biāo)的寬度和高度，然后使用“背景圖像”屬性將其添加為加載程序的背景圖像。您還可以使用“background-position”或“margin”屬性來(lái)調(diào)整其位置，并使用其他樣式選項(xiàng)（如邊框、框陰影等）進(jìn)一步自定義它。憑借 CSS 的一些基本知識(shí)，您可以輕松創(chuàng)建帶有徽標(biāo)的漂亮加載程序。時(shí)間！
以上就是如何使用 CSS 在 loader 中設(shè)置徽標(biāo)？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
