Comment créer un cercle de progression CSS qui s'arrête à des pourcentages spécifiques ?-tutoriel CSS-php.cn

Comment créer un cercle de progression CSS qui s'arrête à des pourcentages spécifiques ?

DDD

Libérer： 2024-12-16 22:35:10

original

312 Les gens l'ont consulté

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

Cercle de progression CSS avec indication d'achèvement partiel

Introduction :

Les barres de progression circulaires sont un élément d'interface utilisateur commun utilisé pour indiquer la progression ou l'état d'achèvement. Cependant, de nombreuses barres de progression CSS affichent des animations complètes qui atteignent 100 %. Cet article montre comment créer un cercle de progression CSS qui peut s'arrêter à des pourcentages spécifiques, comme le montre la capture d'écran ci-dessous :

[Capture d'écran des barres de progression circulaires avec achèvement partiel]

Solution :

Pour y parvenir, nous utilisons des découpages et des animations CSS. La propriété clip permet de masquer une partie du cercle de progression, tandis que la propriété animation définit la rotation du cercle.

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

Copier après la connexion

Code 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>

Copier après la connexion

Cette solution garantit que le cercle de progression s'anime en douceur, avec la possibilité de faire une pause à des moments précis. pourcentages, comme vous le souhaitez.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!