Clip implémente la barre de progression en anneau en CSS3
Cet article vous présente principalement les informations pertinentes sur l'exemple de code du clip CSS3 pour implémenter la barre de progression en anneau. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
Il existe une propriété en CSS appelée clip, qui signifie découpage.
propriété du clip clipse les éléments en position absolue. Cette propriété permet de définir un rectangle de détourage. Pour un élément absolument défini, seul le contenu du rectangle est visible. Le contenu en dehors de cette zone de détourage sera traité en fonction de la valeur du débordement.
Barre de progression en anneau.gif
Comment obtenir l'effet d'une telle barre de progression en anneau Vous pouvez utiliser canevas, svg, GIF, etc., Aujourd'hui, parlons de la façon de l'implémenter en utilisant CSS3.
Idées d'implémentation
L'anneau est très simple. Une ligne de cssborder-radius:50% peut être implémentée, et il n'y a pas de problème de compatibilité. C'est-à-dire, laissez-le sortir...
Nous avons besoin de trois anneaux ici, un plein et deux demi. J'ai dessiné grossièrement l'image ci-dessous
Ici, j'ai utilisé un clip pour couper l'anneau semi-circulaire. Le code principal est le suivant,
1 2 3 4 5 6 7 8 9 10 |
|
Le côté droit est similaire sauf que la position de recadrage a été modifiée
1 2 3 4 5 6 7 8 9 10 |
|
Code complet
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
|
Expliquez brièvement le code ci-dessus
1 Tout d'abord, le demi-cercle droit est masqué parce que ce que nous devons faire pivoter, c'est le demi-cercle gauche. pour que le demi-cercle gauche se déplace vers la position du cercle droit, puis affiche le côté droit, attendez simplement qu'il tourne à 180 degrés.
2. En même temps, nous voyons que le style de recadrage clip: rect(0, 200px, 200px, 100px); et nous ne pouvons le cacher que si nous affichons le côté droit à gauche, mais notre droite n'est-elle pas cachée ? Alors qu'est-ce qu'il montre ? Parce que lorsque vous le faites pivoter vers la gauche, vous pouvez voir le cercle qui tourne vers la droite. C'est un peu compliqué, veuillez le combiner avec le code et mieux le comprendre
3. Lorsque le côté gauche pivote de 180, nous devons afficher le côté droit et définir le recadrage de l'élément box par défaut valeur, qui n'est pas un recadrage, afin qu'elle puisse être entièrement affichée Les cercles gauche et droit.
4. Enfin, on utilise js pour contrôler l'angle de rotation et afficher le pourcentage sur la page
Écrivez à la fin
Si vous pouvez Je ne vois pas l'explication ci-dessus. Comprenez, ne le lisez pas, mettez le code dans le débogage local et comprenez-le vous-même.
Ne soyez pas trop impatient, le code est le meilleur langage.
Recommandations associées :
Méthode CSS3 pour implémenter une barre de progression circulaire
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Comment introduire des images dans vue

Quelle est la fonction de la balise span
