Untuk mula menjawab soalan ini, kita perlu mencipta "Pemuat" terlebih dahulu. Sebarang animasi yang memberitahu pengguna atau pelawat bahawa halaman sedang dimuatkan dan akan mengambil masa beberapa saat untuk disiapkan dipanggil Loader.
Kebanyakan masa, pemuat berguna apabila tapak web mengambil masa terlalu lama untuk mendapatkan hasil. Jika tapak web tertentu tidak mempunyai pemuat CSS, pengguna akan fikir ia tidak bertindak balas sama sekali semasa ia dimuatkan.
Oleh itu, menambah pemuat CSS pada halaman web akan menyebabkan pengguna terganggu atau menunggu seketika untuk halaman dimuatkan dengan betul. Daripada memberi tanggapan bahawa tapak itu tidak bertindak balas, animasi ringkas menunjukkan bahawa tapak itu masih mendapatkan hasil dan halaman itu akan siap dalam beberapa saat.
Anda boleh menggunakan CSS untuk menambah gaya, animasi atau sebarang bentuk penggayaan lain untuk mencipta pemuat.
Kami kini akan mencipta bentuk pemuat yang paling biasa di internet menggunakan 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>
Ini adalah satu lagi bentuk pemuat yang bernyawa pada paksi mendatar.
<!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>
Sekarang kita tahu cara membuat pemuat dalam CSS, kini kita akan beralih kepada cara menambah logo pada pemuat yang baru kita buat.
Mari kita cuba memahami mengapa kita mungkin perlu menambah logo di dalam pemuat. Logo ialah tanda dan identiti jenama, yang menambahkan sentuhan peribadi kepada pengalaman pengguna. Pada masa kini, semua tapak web menggunakan pemuat pemperibadian yang memberi kesan positif pada jenama mereka setiap kali pengguna mendarat di tapak web mereka.
Algoritma yang akan kami ikuti untuk mencipta pemuat yang membenamkan logo adalah seperti berikut -
Langkah 1- Untuk memasukkan pemuat kami, kami akan membina fail HTML dan menambah div HTML pada badan fail.
Langkah 2 - Untuk menghidupkan logo dan pemuat kami, kami akan menulis fail CSS atau membenamkannya menggunakan tag gaya.
Langkah 3 - Masukkan logo menggunakan tag di dalam tag div supaya ia kini dipaparkan dalam kelas pemuat
Diberikan di bawah adalah sifat yang boleh kita gunakan untuk pemuat -
Kami akan menyesuaikan sempadan, warna, ketinggian dan lebar mengikut logo, yang akan meningkatkan konsistensi keseluruhan dan meningkatkan keaslian jenama.
Untuk menambah animasi perubahan secara beransur-ansur, kami akan menggunakan peraturan @keyframes dalam CSS.
Kemudian, untuk membuat pemuat berputar, kita akan menggunakan sifat Transform CSS.
Kami akan mereka bentuk saiz imej logo supaya lebih kecil atau sama dengan saiz pemuat. Kami akan menambah gaya animasi dalam arah yang bertentangan untuk mengatasi kesan putaran logo.
Di bawah ialah contoh menambah pemuat ke tapak web menggunakan algoritma di atas.
<!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="Bagaimana untuk menetapkan logo dalam pemuat menggunakan CSS?">
</div>
</body>
</html>
Secara keseluruhannya, menetapkan logo dalam pemuat menggunakan CSS adalah tugas yang mudah. Apa yang anda perlu lakukan ialah tetapkan lebar dan tinggi logo anda dan kemudian tambahkannya sebagai imej latar belakang untuk pemuat anda menggunakan sifat "imej latar belakang". Anda juga boleh melaraskan kedudukannya menggunakan sifat "kedudukan latar belakang" atau "margin" dan menyesuaikannya lagi dengan pilihan penggayaan lain seperti jidar, bayangan kotak, dsb. Dengan beberapa pengetahuan asas tentang CSS, anda boleh mencipta pemuat yang cantik dengan logo dengan mudah. masa!
Atas ialah kandungan terperinci Bagaimana untuk menetapkan logo dalam pemuat menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah perisian Penguin?
Bagaimana menggunakan beribu-ribu untuk membuat ratusan ribu dalam bulatan mata wang
Pengenalan kepada penunjuk prestasi cakera keras
Punca dan penyelesaian ralat masa jalan
Kekunci pintasan siap sedia
Harga terkini mata wang fil
Bagaimana untuk melihat kod sumber Tomcat
WeChat memulihkan sejarah sembang
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
