Comment créer un effet de dessin de cercle animé en douceur avec un arrière-plan transparent en utilisant uniquement CSS ?

CSS uniquement animer un cercle de dessin avec un rayon de bordure et un arrière-plan transparent

Problème :

Comment créer une bordure animée -cercle de rayon avec un fond transparent tout en masquant la partie initiale du cercle pour un effet dessin ?

Solution :

1. Établir le canevas :

   • Définissez le conteneur avec un positionnement absolu et une bordure pour référence.
   • Créez un élément demi-clip de 50 % de largeur, positionné de manière absolue pour le masque.

2. Créer le cercle :

   • Dans le demi-clip, placez un cercle avec une bordure transparente et un dessus bleu et couleurs de la bordure gauche.
   • Positionnez le cercle aligné à droite dans le demi-clip.

3. Animez le dessin :

   • Utilisez des animations CSS pour faire pivoter le cercle de 135 degrés par rapport à sa position initiale de -45 degrés pour donner l'apparence d'un dessin.
   • Animez le demi-clip pour qu'il pivote de 360 ​​degrés afin de conserver le masque. lieu pendant la rotation.

4. Maintenir la transparence :

   • Ajouter un dégradé linéaire répétitif au corps pour assurer la transparence et fournir un contexte visuel.
   • Ajustez le dégradé à la taille du conteneur et définissez la répétition d'arrière-plan sur aucune répétition.

5. Corrigez le demi-cercle :

   • Créez une seconde moitié du cercle (fixe) sans animation, pivotée de 135 degrés.
   • Animez l'opacité du demi-cercle fixe pour qu'il apparaisse après 50% du temps d'animation.

6. Contrôlez le timing de l'animation :

   • Ajustez les durées et les timings de l'animation comme vous le souhaitez pour obtenir le Vitesse et effet de dessin souhaités.

Extrait de code :

<code class="css">body {
  background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
  height: 500px;
  background-size: 500px 500px;
  background-repeat: no-repeat;
}

#container {
  position: absolute;
  width: 400px;
  height: 400px;
  border: solid red 1px;
  animation: colors 4s infinite;
}

#halfclip {
  width: 50%;
  height: 100%;
  right: 0px;
  position: absolute;
  overflow: hidden;
  transform-origin: left center;
  animation: cliprotate 16s steps(2) infinite;
  -webkit-animation: cliprotate 16s steps(2) infinite;
}

.halfcircle {
  box-sizing: border-box;
  height: 100%;
  right: 0px;
  position: absolute;
  border: solid 25px transparent;
  border-top-color: blue;
  border-left-color: blue;
  border-radius: 50%;
}

#clipped {
  width: 200%;
  animation: rotate 8s linear infinite;
  -webkit-animation: rotate 8s linear infinite;
}

#fixed {
  width: 100%;
  transform: rotate(135deg);
  animation: showfixed 16s steps(2) infinite;
  -webkit-animation: showfixed 16s linear infinite;
}

@-webkit-keyframes cliprotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes cliprotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotate {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(135deg); }
}

@keyframes rotate {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(135deg); }
}

@-webkit-keyframes showfixed {
  0% { opacity: 0; }
  49.9% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}
</code>

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!