Share
Bien que HTML5 Canvas et SVG soient peut-être des solutions plus élégantes pour la création de graphiques, dans ce didacticiel, nous allons apprendre à créer notre propre graphique en anneau avec du simple CSS..
Pour avoir une idée de ce que nous allons créer, jetez un œil à la démo de CodePen intégrée ci-dessous:
Nous commençons avec des balises très basiques; une liste non ordonnée avec un envergure élément à l'intérieur de chacun des éléments de la liste:
Avec le balisage prêt, nous appliquons d’abord quelques styles de base à la liste non ordonnée:
.chart-skills position: relative; largeur: 350px; hauteur: 175px;
Ensuite, nous allons donner à chacun un ::après et un ::avant pseudo-élément, et leur style:
.chart-skills :: before, .chart-skills :: after position: absolue; .chart-skills :: before content: "; width: hériter; hauteur: hériter; border: 45px solid rgba (211,211,211, .3); border-bottom: none; border-haut-gauche-rayon: 175px; border -top-right-radius: 175px; .chart-skills :: after contenu: 'Principales compétences'; gauche: 50%; bas: 10px; transformation: translateX (-50%); taille de police: 1.1rem; poids de police: gras; couleur: bleu cadet;
Faites attention aux styles pour le ::avant pseudo-élément. Cela nous donne notre demi-cercle.
Pseudo-élémentsJusqu'à présent, les règles susmentionnées nous donnent ce résultat:
Parlons maintenant du style des éléments de la liste.
En ce qui concerne la position des éléments de la liste, nous procédons comme suit:
En outre, il convient de noter quelques éléments:
Accentsconagua
z-index propriété.transformer-origine valeur de la propriété (i.e. origine de la transformation: 50% 50%) de la liste des éléments. Plus précisément, nous définissons transformation d'origine: 50% 0. De cette manière, lorsque nous animons (pivotons) les éléments, leur coin supérieur central devient le centre de rotation..Voici les styles CSS associés:
.charte-compétences li position: absolue; Top 100%; gauche: 0; largeur: hériter; hauteur: hériter; bordure: solide 45px; bordure supérieure: aucune; border-bottom-left-radius: 175px; border-bottom-right-radius: 175px; origine de la transformation: 50% 0; .chart-skills li: nième enfant (1) z-index: 4; couleur de bordure: vert; .chart-skills li: nième enfant (2) z-index: 3; couleur de bordure: brique réfractaire; .chart-skills li: nième enfant (3) z-index: 2; couleur de bordure: bleu acier; .chart-skills li: nième enfant (4) z-index: 1; couleur de bordure: orange;
Regardez ce que nous avons construit jusqu'à présent dans la prochaine visualisation:
étendues et éléments de listeActuellement, le seul élément de liste visible est le vert (qui a z-index: 4;) les autres sont en dessous.
Avant de couvrir les étapes pour animer nos éléments de la liste, prenons note du pourcentage souhaité pour chaque élément (c.-à-d. Combien de beignet chacun couvrira). Considérons le tableau suivant:
| La langue | Pourcentage |
|---|---|
| CSS | 12 |
| HTML | 32 |
| PHP | 34 |
| Python | 22 |
Ensuite, nous calculons combien de degrés nous devons animer (faire pivoter) chacun des éléments. Pour connaître le nombre exact de degrés pour chaque élément, nous multiplions son pourcentage par 180 ° (et non par 360 ° car nous utilisons un demi-cercle donut graphique):
| La langue | Pourcentage | Nombre de degrés |
|---|---|---|
| CSS | 12 | 12/100 * 180 = 21,6 |
| HTML | 32 | 32/100 * 180 = 57,6 |
| PHP | 34 | 34/100 * 180 = 61,2 |
| Python | 22 | 22/100 * 180 = 39,6 |
À ce stade, nous sommes prêts à configurer les animations. Tout d’abord, nous définissons des styles d’animation partagés entre tous les éléments, en ajoutant des règles à .graphique-compétences li:
animation-fill-mode: en avant; animation-duration: .4s; animation-timing-function: linéaire;
Ensuite, nous définissons les styles d'animation uniques:
.chartes graphiques li: nième enfant (1) z-index: 4; couleur de bordure: vert; nom-animation: rotation-un; .chart-skills li: nième enfant (2) z-index: 3; couleur de bordure: brique réfractaire; nom-animation: rotation-deux; animation-delay: .4s; .chart-skills li: nième enfant (3) z-index: 2; couleur de bordure: bleu acier; nom-animation: rotation-trois; animation-delay: .8s; .chart-skills li: nième enfant (4) z-index: 1; couleur de bordure: orange; nom-animation: rotation-quatre; délai d'animation: 1.2s;
Notez que nous ajoutons un délai à tous les éléments sauf le premier. De cette façon, nous créons de belles animations séquentielles. Par exemple, lorsque l'animation du premier élément est terminée, le deuxième élément apparaît, etc..
L'étape suivante consiste à spécifier les animations réelles:
@ images clés rotation-une 100% transformation: rotation (21.6deg); / ** * 12% => 21.6deg * / @ images clés rotation-deux 0% transformation: rotation (21.6deg); 100% transformer: rotate (79.2deg); / ** * 32% => 57.6deg * 57.6 + 21.6 => 79.2deg * / @ images-clés rotation-trois 0% transformation: rotation (79.2deg); 100% transformer: rotation (140.4deg); / ** * 34% => 61.2deg * 61.2 + 79.2 => 140.4deg * / @ images-clés rotation-quatre 0% transformation: rotation (140,4deg); 100% transformer: faire pivoter (180deg); / ** * 22% => 39.6deg * 140.4 + 39.6 => 180deg * /
Avant d'aller plus loin, nous verrons brièvement comment fonctionnent les animations:
Le premier élément va de transformer: aucun à transformer: faire pivoter (21.6deg).
Le deuxième élément va de transformer: faire pivoter (21.6deg) (à partir de la position finale du premier élément) à transformer: faire pivoter (79.2deg) (57.6deg + 21.6deg).
Le troisième élément va de transformer: faire pivoter (79.2deg) (à partir de la position finale du deuxième élément) à transformer: faire pivoter (140.4deg) (61.2deg + 79.2deg).
Le quatrième élément va de transformer: faire pivoter (140.4deg) (à partir de la position finale du troisième élément) à transformer: faire pivoter (180deg) (140.4deg + 39.6deg).
Dernier point mais non le moindre, pour masquer la moitié inférieure du graphique, nous devons ajouter les règles suivantes:
.chart-skills / * règles existantes… * / overflow: caché; .chart-skills li / * règles existantes… * / transform-style: preserve-3d; visibilité face arrière: masquée;
le débordement caché La valeur de la propriété garantit que seul le premier demi-cercle (celui créé avec le ::avant pseudo-élément) est visible. N'hésitez pas à supprimer cette propriété si vous souhaitez tester la position initiale des éléments de la liste.
le transformer-style: preserve-3d et visibilité face arrière: masquée Les propriétés empêchent les effets de scintillement pouvant survenir dans différents navigateurs du fait des animations. Si le problème persiste dans votre navigateur, vous pouvez également essayer ces solutions..
Le graphique est presque prêt! Il ne reste plus qu'à styler les étiquettes des graphiques, ce que nous ferons dans la section suivante..
Voici la démo CodePen montrant l’apparence actuelle de notre graphique:
Dans cette section, nous appelons les étiquettes de graphique.
En ce qui concerne leur position, nous faisons ce qui suit:
position: absolue et utiliser le Haut et la gauche propriétés pour définir la position souhaitée.transformer: faire pivoter (79.2deg), et ainsi son étiquette associée aura transformer: faire pivoter (-79.2deg).Voici les styles CSS correspondants:
.cartographie compétences position: absolue; taille de police: .85rem; .chart-skills li: nième enfant (1) span top: 5px; à gauche: 10px; transformer: faire pivoter (-21,6 degrés); .chart-skills li: nième enfant (2) span top: 20px; à gauche: 10px; transformer: faire pivoter (-79,2deg); .chart-skills li: enfant-nième (3) span top: 18px; à gauche: 10px; transformer: faire pivoter (-140,4 degrés); .chart-skills li: nième enfant (4) span top: 10px; à gauche: 10px; transformer: faire pivoter (-180deg);
Maintenant que nous avons positionné les étiquettes, il est temps de les animer. Deux choses méritent d'être mentionnées ici:
délai d'animation propriété pour créer des animations séquentielles. De plus, nous ajoutons le visibilité face arrière: masquée valeur de propriété pour s'assurer qu'il n'y a pas d'effets de scintillement dus aux animations.Les règles CSS relatives à l'animation des étiquettes de graphique sont présentées ci-dessous:
.compétences graphique - visibilité arrière: caché; animation: fondu en avant .4s linéaire; .chart-skills li: nième enfant (2) span animation-delay: .4s; .chart-skills li: nth-child (3) span animation-delay: .8s; .chart-skills li: nth-child (4) span délai-animation: 1.2s; @keyframes fade-in 0%, 90% opacity: 0; 100% opacité: 1;
Voici le tableau final:
En général, la démo fonctionne bien dans tous les navigateurs. Je veux juste discuter de deux petites questions qui sont liées à la rayon de la frontière propriété.
Premièrement, si nous donnions des couleurs différentes à nos articles, le graphique pourrait ressembler à ceci:
Remarquez par exemple les coins supérieur et inférieur du troisième élément. Il y a deux lignes rouges qui proviennent de la couleur de la bordure du quatrième élément. Nous pouvons voir ces lignes car le quatrième élément a une couleur de bordure plus sombre que le troisième. Bien que ce soit un petit problème, il est bon de le savoir pour choisir les couleurs appropriées pour vos propres graphiques..
Deuxièmement, dans Safari, le graphique apparaît comme suit:
Regardez les petites lacunes apparaissant dans les deuxième et troisième éléments. Si vous savez quelque chose à ce sujet, faites-le nous savoir dans les commentaires ci-dessous.!
Dans ce didacticiel, nous avons créé un graphique en anneau en demi-cercle avec du CSS pur. De nouveau, comme mentionné dans l'introduction, il existe des solutions potentiellement plus puissantes (par exemple, HTML5 Canvas et SVG) pour créer ce genre de choses. Cependant, si vous voulez construire quelque chose de simple et léger, et relever un défi, CSS est la voie à suivre.!
