Bagaimana untuk Membuat Bulatan Kemajuan CSS dengan Hentian Peratusan Tersuai?-tutorial css-php.cn

Bagaimana untuk Membuat Bulatan Kemajuan CSS dengan Hentian Peratusan Tersuai?

Barbara Streisand

Lepaskan： 2024-12-10 02:35:13

asal

911 orang telah melayarinya

How to Create a CSS Progress Circle with Custom Percentage Stops?

Cara Membuat Bulatan Kemajuan CSS dengan Hentian Peratusan Tersuai

Anda mungkin menghadapi senario di mana bar kemajuan bulat diperlukan, tetapi bulatan animasi lalai yang memenuhi 100% tidak memenuhi spesifikasi anda. Dalam artikel ini, kami akan menunjukkan cara membuat bulatan kemajuan CSS yang boleh dihentikan pada mata peratusan tertentu.

Pelaksanaan CSS

Matlamat kami ialah menggunakan CSS untuk mencapai bulatan kemajuan ini dengan khusus peratusan berhenti. Begini cara untuk melakukannya:

.wrapper {
  width: 100px;
  height: 100px;
  position: absolute;
  clip: rect(0px, 100px, 100px, 50px);
}

.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}

div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function:linear;
}

.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s;
  -webkit-animation-delay: 3s;
  -webkit-animation-name: close-wrapper;
}

.circle[data-anim~=left] {
  -webkit-animation-duration: 6s;
  -webkit-animation-name: left-spin;
}

.circle[data-anim~=right] {
  -webkit-animation-duration: 3s;
  -webkit-animation-name: right-spin;
}

@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

Salin selepas log masuk

Struktur HTML

Setelah anda mempunyai CSS, anda boleh mencipta bulatan kemajuan menggunakan struktur HTML berikut:

<div class="wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>

Salin selepas log masuk

Kod ini akan membuat bulatan kemajuan yang bermula dengan separuh bulatan (50%) dan kemudian memutar bahagian kiri ke 360 darjah dan bahagian kanan ke 180 darjah.

Kesimpulan

Menggunakan teknik CSS ini, anda kini boleh mencipta bar kemajuan bulat dengan hentian peratusan tersuai tanpa memerlukan JavaScript. Ini membuka pelbagai kemungkinan untuk mereka bentuk penunjuk kemajuan tersuai untuk memenuhi keperluan khusus anda.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Bulatan Kemajuan CSS dengan Hentian Peratusan Tersuai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!