Bagaimana untuk melaksanakan kesan Memuatkan mudah dengan CSS-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk melaksanakan kesan Memuatkan mudah dengan CSS

PHPz

Lepaskan： 2023-04-26 16:16:14

asal

3476 orang telah melayarinya

Pemuatan ialah fungsi yang sangat biasa dalam pembangunan bahagian hadapan. Apabila data halaman web dimuatkan, kami berharap dapat memberi pengguna maklum balas visual sambil menunggu untuk meningkatkan pengalaman pengguna. Dalam artikel ini, kami akan melaksanakan kesan Pemuatan mudah melalui CSS.

1. Gunakan animasi Animasi untuk melaksanakan Pemuatan

Animasi ialah modul baharu dalam CSS3, yang boleh digunakan untuk mencipta kesan animasi yang sangat kompleks. Di sini kami menggunakan Animasi untuk mencipta kesan Memuatkan.

Mula-mula tambah bekas untuk kesan Memuatkan dalam HTML:

<div class="loading">
  <div class="loading-circle"></div>
  <div class="loading-circle"></div>
  <div class="loading-circle"></div>
</div>

Salin selepas log masuk

Seterusnya, tentukan animasi bingkai utama dalam CSS untuk memutarkan "bulatan".

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Salin selepas log masuk

Kemudian gayakan kelas .loading-circle untuk menjadikannya bulatan dan gunakan animasi yang ditakrifkan di atas di dalamnya.

.loading-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: rotate 1.5s ease-in-out infinite;
}

Salin selepas log masuk

Akhir sekali, gayakan bekas dalam .css-loading supaya ia berpusat pada halaman, dan laraskan kedudukan dan saiz "bulatan" dengan sewajarnya.

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-circle:nth-child(1) {
  transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
  transform: translateY(30px);
}

Salin selepas log masuk

Kod pelaksanaan lengkap adalah seperti berikut:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: rotate 1.5s ease-in-out infinite;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-circle:nth-child(1) {
  transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
  transform: translateY(30px);
}

Salin selepas log masuk

2 Gunakan Peralihan untuk melaksanakan Pemuatan

Selain Animasi, kami juga boleh menggunakan Peralihan dalam. CSS Untuk mencapai kesan Memuatkan.

Kami juga menambah bekas dalam HTML sebagai kawasan paparan Memuatkan:

<div class="loading-2">
  <div class="loading-circle-2"></div>
  <div class="loading-circle-2"></div>
  <div class="loading-circle-2"></div>
</div>

Salin selepas log masuk

Dalam CSS, kami mentakrifkan keadaan awal dan keadaan akhir untuk .loading-circle-2 kelas, Dan gunakan Peralihan untuk mencapai peralihan yang lancar antara negeri.

.loading-circle-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  transform: scale(0);
  transition: transform 0.5s ease 0.2s;
}

.loading-2 .loading-circle-2:nth-child(1) {
  animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
  animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
  animation: delay 0.4s linear infinite;
}

@keyframes delay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

Salin selepas log masuk

Akhir sekali, kami menetapkan gaya pada elemen .loading-2 supaya ia berpusat pada halaman.

Kod pelaksanaan lengkap adalah seperti berikut:

.loading-circle-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  transform: scale(0);
  transition: transform 0.5s ease 0.2s;
}

.loading-2 .loading-circle-2:nth-child(1) {
  animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
  animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
  animation: delay 0.4s linear infinite;
}

@keyframes delay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.loading-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

Salin selepas log masuk

3. Ringkasan

Artikel ini menunjukkan cara menggunakan CSS untuk mencapai kesan Pemuatan melalui dua kaedah berbeza. Walaupun Animasi agak kompleks, ia boleh mencipta kesan animasi yang sangat kaya dan pelbagai. Peralihan adalah lebih ringkas dan mudah difahami, dan boleh mencapai beberapa animasi mudah.

Secara umum, menggunakan CSS untuk melaksanakan Pemuatan ialah cara yang agak mudah, yang boleh meningkatkan pengalaman pengguna dengan berkesan. Sudah tentu, dalam pembangunan sebenar, kami juga mungkin perlu membuat beberapa pelarasan dan pengoptimuman gaya berdasarkan keperluan sebenar projek.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kesan Memuatkan mudah dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!