Wie erstelle ich einen CSS-Fortschrittskreis, der bei bestimmten Prozentsätzen stoppt?

CSS-Fortschrittskreis mit teilweiser Abschlussanzeige

Einführung:

Kreisförmige Fortschrittsbalken sind ein Allgemeines UI-Element, das zur Anzeige des Fortschritts oder des Abschlussstatus verwendet wird. Viele CSS-Fortschrittsbalken zeigen jedoch vollständige Animationen an, die 100 % erreichen. In diesem Artikel wird gezeigt, wie Sie einen CSS-Fortschrittskreis erstellen, der bei bestimmten Prozentsätzen anhalten kann, wie im Screenshot unten zu sehen ist:

[Screenshot von kreisförmigen Fortschrittsbalken mit teilweiser Fertigstellung]

Lösung :

Um dies zu erreichen, verwenden wir CSS-Clipping und Animationen. Die Clip-Eigenschaft wird verwendet, um einen Teil des Fortschrittskreises auszublenden, während die Animationseigenschaft die Drehung des Kreises definiert.

CSS-Code:

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

HTML-Code:

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

Diese Lösung stellt sicher, dass der Fortschrittskreis reibungslos animiert wird und an bestimmten Stellen angehalten werden kann Prozentsätze nach Wunsch.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen CSS-Fortschrittskreis, der bei bestimmten Prozentsätzen stoppt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!