Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich einen CSS-Fortschrittskreis, der bei bestimmten Prozentsätzen stoppt?

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

DDD
DDDOriginal
2024-12-16 22:35:10315Durchsuche

How to Create a CSS Progress Circle that Stops at Specific Percentages?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn