Langkah-langkah pelaksanaan cara menggunakan CSS untuk mencipta bar kemajuan berputar

Langkah tentang cara menggunakan CSS untuk mencipta bar kemajuan berputar

CSS ialah bahasa helaian gaya yang digunakan untuk mereka bentuk dan susun atur halaman web. Ia menyediakan banyak sifat dan fungsi. Salah satunya ialah anda boleh membuat bar kemajuan berputar menggunakan CSS. Kesan khas ini boleh digunakan untuk menunjukkan pemuatan halaman atau kemajuan tugas. Berikut ialah langkah pelaksanaan khusus dan contoh kod:

Langkah 1: Struktur HTML
Mula-mula, kita perlu mencipta elemen yang mengandungi bar kemajuan dalam HTML. Berikut ialah contoh mudah:

<div class="progress-bar">
  <div class="progress"></div>
</div>

Langkah Kedua: Gaya CSS
Seterusnya, kita perlu menentukan gaya untuk bekas luar bar kemajuan dan bar kemajuan itu sendiri. Dalam contoh ini kita akan menggunakan bar kemajuan bulat. Berikut ialah penjelasan terperinci tentang gaya:

.progress-bar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f2f2f2;
  position: relative;
  overflow: hidden;
}

Kod ini mentakrifkan lebar, tinggi, jejari jidar dan warna latar belakang bekas luar. Anda juga perlu meletakkannya secara relatif dan menetapkan persembunyian limpahan.

Berikut ialah definisi gaya untuk bar kemajuan itu sendiri:

.progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff6600;
  transform-origin: center center;
  transform: rotate(0deg);
}

Kod ini meletakkan bar kemajuan sebagai kedudukan mutlak, yang akan bermula dari sudut kiri atas bekas. Lebar dan ketinggian bar kemajuan ditetapkan kepada 100% supaya ia akan mengisi keseluruhan bekas. Warna latar belakang ditetapkan kepada oren.

Langkah 3: Kesan Animasi
Untuk mencipta kesan putaran, kami akan menggunakan sifat animasi CSS. Berikut ialah penjelasan terperinci tentang kesan animasi: animation属性。以下是对动画效果的详细解释：

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

.progress {
  animation: rotate 2s linear infinite;
}

这段代码定义了一个名为rotate

.progress {
  animation: rotate 2s linear infinite;
  width: 50%;
}

Kod ini mentakrifkan animasi bingkai utama bernama putar. Animasi ini bermula pada sudut putaran 0% (0 darjah) dan berakhir pada sudut putaran 100% (360 darjah). Kami kemudian menggunakan animasi ini pada elemen bar kemajuan dan menetapkan masa animasi, kelajuan animasi dan gelung tak terhingga.

Langkah 4: Laraskan kemajuan

Untuk melaraskan kemajuan, kita boleh melakukannya dengan menukar lebar elemen bar kemajuan. Berikut ialah contoh mudah:

rrreee

Dalam contoh ini, kami menetapkan lebar bar kemajuan kepada 50% supaya ia akan mengisi separuh daripada bekas.

Ringkasnya, perkara di atas ialah langkah pelaksanaan dan contoh kod untuk menggunakan CSS untuk mencipta bar kemajuan berputar. Dengan menyediakan struktur HTML, gaya CSS dan kesan animasi secara beransur-ansur, kami boleh mencipta bar kemajuan berputar yang cantik untuk memaparkan pemuatan halaman atau kemajuan tugasan. Anda boleh melaraskan gaya dan animasi untuk memenuhi keperluan khusus anda. 🎜

Atas ialah kandungan terperinci Langkah-langkah pelaksanaan cara menggunakan CSS untuk mencipta bar kemajuan berputar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!