Bagaimanakah Saya Boleh Mencipta Penunjuk Kemajuan CSS Sahaja Yang Berhenti pada Peratusan Tertentu?

Penunjuk Kemajuan Yang Berhenti pada Peratusan Tertentu Menggunakan CSS Sahaja

Anda telah mencari bar kemajuan di tapak web ini, tetapi yang anda' telah menemui semua bulatan animasi rancangan yang pergi ke 100% penuh. Walau bagaimanapun, anda berminat untuk mencipta bar kemajuan yang berhenti pada peratusan tertentu, seperti yang dipaparkan dalam tangkapan skrin di bawah.

Untuk mencapai kesan ini hanya menggunakan CSS, anda boleh menggunakan gabungan teknik keratan dan animasi . Pertimbangkan biola berikut sebagai contoh:

.wrapper {
  width: 100px; /* Set the size of the progress bar */
  height: 100px;
  position: absolute; /* Enable clipping */
  clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;  /* Only run once */
  -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
  -webkit-animation-timing-function:linear; /* Linear animation */
}

.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
  -webkit-animation-delay: 3s; /* Wait half of the animation */
  -webkit-animation-name: close-wrapper; /* Keyframes name */
}

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

.circle[data-anim~=right] {
  -webkit-animation-duration: 3s; /* Half animation time */
  -webkit-animation-name: right-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

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

Dalam biola ini, gabungan keratan, elemen bulat dan animasi digunakan untuk mencipta kesan yang diingini. Dengan menyembunyikan separuh daripada bar kemajuan menggunakan sifat klip, dan kemudian menghidupkan putaran bahagian berbeza elemen bulatan, bar kemajuan yang berhenti pada peratusan tertentu dicapai.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Penunjuk Kemajuan CSS Sahaja Yang Berhenti pada Peratusan Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!