Bagaimana untuk Membuat Bulatan Kemajuan CSS yang Berhenti pada Peratusan Tertentu?

Kalangan Kemajuan CSS dengan Petunjuk Penyelesaian Separa

Pengenalan:

Bar kemajuan pekeliling ialah elemen UI biasa yang digunakan untuk menunjukkan status kemajuan atau penyiapan. Walau bagaimanapun, banyak bar kemajuan CSS memaparkan animasi penuh yang mencapai 100%. Artikel ini menunjukkan cara membuat bulatan kemajuan CSS yang boleh berhenti pada peratusan tertentu, seperti yang dilihat dalam tangkapan skrin di bawah:

[Tangkapan skrin bar kemajuan bulatan dengan penyiapan separa]

Penyelesaian :

Untuk mencapai matlamat ini, kami menggunakan keratan CSS dan animasi. Sifat klip digunakan untuk menyembunyikan sebahagian daripada bulatan kemajuan, manakala sifat animasi mentakrifkan putaran bulatan.

Kod CSS:

.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);
  }
}

Kod HTML:

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

Penyelesaian ini memastikan bulatan kemajuan bergerak dengan lancar, dengan keupayaan untuk jeda pada peratusan tertentu, seperti yang dikehendaki.

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