Maison Effets spéciaux JS Autres effets spéciaux Effet d'animation de la barre de progression circulaire CSS3

Effet d'animation de la barre de progression circulaire CSS3

Effet d'animation de la barre de progression circulaire CSS3

L'effet d'animation de barre de progression circulaire CSS3 est un effet d'animation de barre de progression circulaire en pourcentage implémenté par CSS3 SVG, qui peut être utilisé pour démontrer la maîtrise et la compétence des compétences.

<style>
corps{couleur de fond : #fff}
@-webkit-keyframes charge {
  0% {
    trait-dashoffset : 0;
  }
}
Chargement des @keyframes {
  0% {
    trait-dashoffset : 0;
  }
}
.progrès {
  position : relative ;
  affichage : bloc en ligne ;
  remplissage : 0 ;
  text-align: center;
}
.progrès > li {
  affichage : bloc en ligne ;
  position : relative ;
  text-align: center;
  couleur : #93A2AC ;
  famille de polices : Lato ;
  poids de la police : 100 ;
  marge : 2rem;
}
.progrès > li:avant {
  contenu : attr(nom-donnée);
  position : absolue ;
  largeur : 100 % ;
  en bas : -2rem;
  poids de la police : 400 ;
}
.progrès > li:après {
  contenu : attr(données-pourcentage);
  position : absolue ;
  largeur : 100 % ;
  haut : 3,7rem;
  gauche : 0;
  taille de police : 2rem;
  text-align: center;
}
.progrès svg {
  largeur : 10rem;
  hauteur : 10rem;
}
.progress svg:ntième-enfant(2) {
  position : absolue ;
  gauche : 0;
  haut : 0 ;
  -webkit-transform : rotation (-90 deg); 
          transformation : rotation (-90 deg);
}
.progress svg:nt-enfant(2) chemin {
  remplir : aucun ;
  largeur de trait : 25 ;
  coup-dasharray : 629 ;
  accident vasculaire cérébral : #fff;
  opacité : 0,9 ;
  -webkit-animation : charger 10 s ;
          animation : charger 10 s ;
}
</style>
Clause de non-responsabilité

Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel ! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn

Article connexe

Comment implémenter une barre de progression circulaire en CSS3 ? Implémentation d'une barre de progression circulaire en CSS3 Comment implémenter une barre de progression circulaire en CSS3 ? Implémentation d'une barre de progression circulaire en CSS3

20 Oct 2018

L'article d'aujourd'hui vous présentera la méthode d'implémentation de la barre de progression circulaire CSS3. Les amis intéressés peuvent y jeter un œil.

Illustration de la création d'une barre de progression circulaire à l'aide de CSS3 Illustration de la création d'une barre de progression circulaire à l'aide de CSS3

09 Mar 2017

L'idée de base pour créer une barre de progression en forme de beignet est de dessiner une forme d'arc de base, puis dans CSS3, nous pouvons contrôler sa rotation pour connecter les formes de base en série et créer l'effet de disparition partielle. Apprenons à créer. une forme de beignet avec des diagrammes en CSS3. Exemple de tutoriel de barre de progression.

Comment obtenir l'effet de barre de progression circulaire ? Exemple de code pour implémenter l'effet de barre de progression circulaire en utilisant CSS3 Comment obtenir l'effet de barre de progression circulaire ? Exemple de code pour implémenter l'effet de barre de progression circulaire en utilisant CSS3

27 Sep 2018

Aujourd'hui, je vais vous présenter une autre forme de barre de progression : la barre de progression circulaire. Ce type de barre de progression convient aux pages en cours de chargement et aux minuteries de sonnerie.

Comment implémenter une barre de progression circulaire en CSS3 Comment implémenter une barre de progression circulaire en CSS3

19 Dec 2017

Lors du développement d'une applet WeChat, j'ai rencontré le besoin d'une barre de progression circulaire. Cet article présente principalement des exemples d'utilisation de CSS3 pour implémenter des barres de progression circulaires. Le code détaillé est compilé ici, ce qui est d'une grande valeur pratique. Les amis qui en ont besoin peuvent s'y référer.

Utilisez CSS3 pour implémenter une barre de progression circulaire Utilisez CSS3 pour implémenter une barre de progression circulaire

13 Mar 2017

Lors du développement d'une applet WeChat, j'ai rencontré le besoin d'une barre de progression circulaire. Dessiner avec Canvas est fastidieux : 1. Afin de pouvoir s'adapter sur différents écrans, la taille de la barre de progression doit être calculée dynamiquement ; 2. Dans le mini-programme, le canevas a le niveau le plus élevé et n'est pas facile à agrandir. Mais en utilisant cs...

Introduction détaillée à la barre de progression circulaire Introduction détaillée à la barre de progression circulaire

10 Jun 2017

L'idée générale est la suivante : générer deux demi-cercles par détourage pour afficher une barre de progression statique, puis créer des effets dynamiques en faisant pivoter le changement d'angle. Passons d'abord en revue deux points de connaissances de base (1) Un attribut peu courant de CSS : clip: rect(top, right, bottom, left); Cet attribut spécifie un rectangle recadré, où le décalage spécifié par top et bottom est Le décalage est calculé à partir de le bord supérieur de la boîte d'éléments, à droite et à gauche...

Comment implémenter une barre de progression circulaire en utilisant CSS3 Comment implémenter une barre de progression circulaire en utilisant CSS3

25 Jun 2018

Cet article présente principalement des exemples d'utilisation de CSS3 pour implémenter des barres de progression circulaires. Le code détaillé est compilé ici, ce qui est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer.

Comment obtenir un effet de barre de progression en CSS3 Comment obtenir un effet de barre de progression en CSS3

23 Jun 2020

Cet article présente principalement l'utilisation de CSS3 pour obtenir des effets de barre de progression et des pourcentages d'addition dynamiques. L'article le présente en détail à travers des exemples de codes. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous. Les amis qui en ont besoin suivront l'éditeur. Étudier et étudier

Explication détaillée de CSS3+jQuery pour implémenter une barre de progression circulaire Explication détaillée de CSS3+jQuery pour implémenter une barre de progression circulaire

26 May 2017

L'idée générale est la suivante : générer deux demi-cercles par détourage pour afficher une barre de progression statique, puis créer des effets dynamiques en faisant pivoter le changement d'angle. Passons d'abord en revue deux points de connaissances de base (1) Un attribut peu courant du CSS : {code...} Cet attribut spécifie un rectangle recadré...

See all articles See all articles

Hot Tools

jQuery+Html5 réalise un magnifique code d'animation de confession

jQuery+Html5 réalise un magnifique code d'animation de confession

jQuery+Html5 implémente un magnifique code d'animation de confession, l'effet d'animation est génial, un incontournable pour que les programmeurs se confessent !

Code d'effets spéciaux js pour la confession romantique d'un couple

Code d'effets spéciaux js pour la confession romantique d'un couple

Code d'effets spéciaux JS pour la confession romantique des couples. De tels effets spéciaux peuvent être utilisés sur des sites Web de photographie de mariage ou placés sur des sites Web personnels. C'est également un bon effet spécial que le site Web chinois PHP recommande de télécharger !

Simple js aime l'artefact de confession

Simple js aime l'artefact de confession

Artefact de confession d'amour simple en js natif

Effets expressifs d'animation de particules HTML5 de Bunker

Effets expressifs d'animation de particules HTML5 de Bunker

Code d'effets spéciaux d'expression d'animation de particules HTML5 de Bunker, le texte des effets spéciaux d'animation peut être modifié dans le code, vous pouvez créer une page, vous pouvez personnaliser la saisie de texte, il devrait être très populaire, cet effet spécial HTML5 est très beau.

Modèle d'interface de connexion en arrière-plan réactif jQuery

Modèle d'interface de connexion en arrière-plan réactif jQuery

Code source HTML du modèle d'interface de connexion backend réactif jQuery. La page de connexion utilise jquery pour vérifier le formulaire et déterminer si le nom d'utilisateur et le mot de passe répondent aux exigences. Habituellement, la page de connexion est une page qui doit être utilisée sur les sites Web d'entreprise ou les sites Web réactifs des centres commerciaux. pages, lorsque le navigateur effectue un zoom avant ou arrière, l'arrière-plan redimensionnera l'image en fonction du navigateur ! Le site Web chinois PHP recommande le téléchargement !