Share
Cu toate că HTML5 Canvas și SVG ar putea fi soluții mai elegante pentru cladirile de construcție, în acest tutorial vom învăța cum să ne construim propria diagramă de gogoși cu doar CSS simplu.
Pentru a obține o idee despre ceea ce vom crea, examinați demo-ul CodePen încorporat de mai jos:
Începem cu un marcaj de bază; o listă simplă neordonată cu deschidere element în fiecare dintre elementele listate:
Cu pregătirea pentru marcare, mai întâi aplicăm câteva stiluri de bază pe lista neordonată:
.abilități-diagramă poziție: relativă; lățime: 350px; înălțime: 175px;
Apoi, vom da fiecăruia unul ::după și a ::inainte de pseudo-element, și le stil:
.abilități grafice :: înainte, abilități de carte :: după poziție: absolută; abilitățile de șablon :: înainte de conținut: "; lățime: moștenire; înălțime: moștenire; graniță: 45px solid rgba (211.211.211, .3); - top-dreapta-raza: 175px; abilitati de caritate :: dupa continut: 'Top Skills'; stanga: 50%; font-weight: bold; culoare: cadetblue;
Acordați atenție stilurilor pentru ::inainte de pseudo-elemente. Acest lucru ne dă jumătate cerc.
Elemente pseudoPână în prezent, regulile mai sus menționate ne dau acest rezultat:
Să discutăm acum stilul articolelor din listă.
În ceea ce privește poziția elementelor din listă, facem următoarele:
În plus, câteva lucruri merită notate aici:
Accentsconagua
z-index proprietate.transformare origine valoarea proprietății (adică. transformare-origine: 50% 50%) a elementelor din listă. Mai exact, am stabilit transformare-origine: 50% 0. În acest fel, atunci când vom anima (roti) elementele, colțul lor de sus centru va deveni centrul de rotație.Iată stilurile CSS asociate:
.abilitățile de diagramă li position: absolute; top: 100%; stânga: 0; lățime: moștenire; înălțime: moștenire; frontieră: 45px solid; frontieră: nici una; raza de jos-stânga-dreapta: 175px; raza de jos-dreapta-dreapta: 175px; transformare-origine: 50% 0; abilitățile de carte li: n-copil (1) z-index: 4; culoarea frontală: verde; abilitățile de carte li: n-copil (2) z-index: 3; frontieră-culoare: cărămidă; abilitățile de carte li: n-copil (3) z-index: 2; culoarea frontală: oțel albastru; abilitățile de cartelă li: n-copil (4) z-index: 1; culoarea frontală: portocaliu;
Uitați-vă la ceea ce am construit până acum în următoarea vizualizare:
deschideri și elemente de listăÎn prezent, singurul element din listă care este vizibil este cel verde (care are z-index: 4;) celelalte sunt sub ea.
Înainte de a acoperi pașii pentru animarea elementelor din listă, să luăm notă de procentul dorit pentru fiecare element (de exemplu: cât va fi acoperită fiecare gogoșă). Luați în considerare următorul tabel:
| Limba | Procent |
|---|---|
| CSS | 12 |
| HTML | 32 |
| PHP | 34 |
| Piton | 22 |
Apoi, vom calcula câte grade trebuie să animăm (rotiți) fiecare dintre elementele. Pentru a afla numărul exact de grade pentru fiecare element, îi înmulțim procentul cu 180 ° (nu cu 360 ° deoarece folosim a semicerc gogoasa):
| Limba | Procent | Numărul de grade |
|---|---|---|
| CSS | 12 | 12/100 * 180 = 21,6 |
| HTML | 32 | 32/100 * 180 = 57,6 |
| PHP | 34 | 34/100 * 180 = 61,2 |
| Piton | 22 | 22/100 * 180 = 39,6 |
În acest moment, suntem pregătiți să setăm animațiile. Mai întâi, definim câteva stiluri de animație care sunt partajate pentru toate elementele, adăugând câteva reguli .abilitățile de diagramă li:
modul animație-umplere: înainte; durata animației: .4s; animație-temporizare-funcție: liniară;
Apoi, definim stilurile unice de animație:
.abilități în diagramă li: n-copil (1) z-index: 4; culoarea frontală: verde; animație-nume: rotate-one; abilitățile de carte li: n-copil (2) z-index: 3; frontieră-culoare: cărămidă; animație-nume: rotate-două; animație-întârziere: .4s; abilitățile de carte li: n-copil (3) z-index: 2; culoarea frontală: oțel albastru; animație-nume: rotate-trei; animație-întârziere: .8s; abilitățile de cartelă li: n-copil (4) z-index: 1; culoarea frontală: portocaliu; animație-nume: rotate-four; animație-întârziere: 1.2 s;
Observați că adăugăm o întârziere tuturor elementelor, cu excepția primei. În acest fel, creăm animații secvențiale frumoase. De exemplu, când animația primului element se termină, apare al doilea element și așa mai departe.
Următorul pas este să specificați animațiile reale:
@ rotiți-cheie-un 100% transform: rotate (21.6deg); / ** * 12% => 21.6deg * / @ rotiri cheie-două 0% transform: rotate (21.6deg); 100% transform: rotate (79.2deg); / ** * 32% => 57.6deg * 57.6 + 21.6 => 79.2deg * / @ rotiri cheie-trei 0% transform: rotate (79.2deg); 100% transform: rotate (140,4deg); / ** * 34% => 61.2deg * 61.2 + 79.2 => 140.4deg * / @ rotiri cheie-patru 0% transform: rotate (140.4deg); 100% transform: rotate (180deg); / ** * 22% => 39,6deg * 140,4 + 39,6 => 180deg * /
Înainte de a merge mai departe, vom analiza scurt modul în care animațiile funcționează:
Primul element merge de la transforma: nici unul la transforma: roti (21.6deg).
Al doilea element merge de la transforma: roti (21.6deg) (pornește de la poziția finală a primului element) la transforma: roti (79.2deg) (57,6deg + 21,6deg).
Al treilea element merge de la transforma: roti (79.2deg) (pornește de la poziția finală a celui de - al doilea element) la transforma: roti (140.4deg) (61,2deg + 79,2deg).
Al patrulea element merge de la transforma: roti (140.4deg) (pornește de la poziția finală a celui de - al treilea element) la transforma: roti (180deg) (140,4deg + 39,6deg).
Nu în ultimul rând, pentru a ascunde jumătatea inferioară a graficului, trebuie să adăugăm următoarele reguli:
.abilități grafice / * reguli existente ... * / overflow: hidden; .hart-competențe li / * regulile existente ... * / transform-style: preserve-3d; spate-vizibilitate: ascuns;
overflow: ascuns valoarea proprietății asigură că numai primul semicerc (cel creat cu ::inainte de pseudo-element). Simțiți-vă liber să eliminați această proprietate dacă doriți să testați poziția inițială a elementelor din listă.
transform-stil: conserve-3d și fata de jos-vizibilitate: ascuns proprietăți împiedică efectele de pâlpâire care pot apărea în diferite browsere din cauza animațiilor. Dacă această problemă persistă în browserul dvs., vă recomandăm să încercați și aceste soluții.
Graficul este aproape gata! Tot ce rămâne rămâne să etichetați etichetele de diagramă, pe care le vom face în secțiunea următoare.
Iată demo-ul CodePen care arată aspectul curent al diagramei noastre:
În această secțiune, vom modela etichetele diagramelor.
În ceea ce privește poziția lor, facem următoarele:
poziția: absolută și utilizați top și stânga proprietăți pentru a-și stabili poziția dorită.transforma: roti (79.2deg), și, prin urmare, eticheta sa asociată va avea transforma: roti (-79.2deg).Mai jos sunt stilurile CSS corespunzătoare:
.diagrama-competențe span poziție: absolută; font-size: .85rem; abilitățile de carte li: n-copil (1) span top: 5px; stânga: 10px; transforma: roti (-21.6deg); abilitățile de carte li: n-copil (2) span top: 20px; stânga: 10px; transforma: roti (-79.2deg); . Competențe de carte li: n-copil (3) span top: 18px; stânga: 10px; transforma: roti (-140.4deg); abilități de carte li: n-copil (4) span top: 10px; stânga: 10px; transforma: roti (-180deg);
Acum că am poziționat etichetele, este timpul să le animăm. Două lucruri merită menționate aici:
animație întârziere proprietate pentru a crea animații secvențiale. În plus, adăugăm fata de jos-vizibilitate: ascuns valoarea proprietății pentru a vă asigura că nu există efecte de pâlpâire din cauza animațiilor.Regulile CSS care se ocupă cu animarea etichetelor de pe hartă sunt prezentate mai jos:
.abilitățile în diagrame backface-visibility: hidden; animație: fading-in .4s liniar înainte; abilitățile de carte li: nth-child (2) span animation-delay: .4s; abilități de carte li: nth-child (3) span animație-întârziere: .8s; abilitățile de carte li: n-copil (4) span animație-întârziere: 1,2 s; @ decuplarea cheilor de chei 0%, 90% opacitate: 0; 100% opacitate: 1;
Iată graficul final:
În general, demo-ul funcționează bine în toate browserele. Vreau doar să discut două aspecte mici legate de border-radius proprietate.
În primul rând, dacă ne-ar da culori diferite elementelor noastre, graficul ar putea arăta astfel:
Observați, de exemplu, colțurile de sus și de jos ale celui de-al treilea element. Există două linii roșii care provin de la culoarea frontală a celui de-al patrulea element. Putem vedea acele linii, deoarece cel de-al patrulea element are o culoare frontală mai închisă în comparație cu a treia. Deși aceasta este o mică problemă, este bine să fiți conștienți de aceasta pentru a alege culorile potrivite pentru propriile tale diagrame.
În al doilea rând, în Safari, diagrama apare astfel:
Uită-te la mici decalaje care apar în al doilea și al treilea element. Dacă știți ceva despre această problemă, anunțați-ne în comentariile de mai jos!
În acest tutorial, am trecut prin procesul de creare a unei diagrame de semicercuri cu CSS pură. Din nou, după cum sa menționat în introducere, există soluții potențial mai puternice (de ex. HTML5 Canvas și SVG) acolo pentru a crea astfel de lucruri. Cu toate acestea, dacă doriți să construiți ceva simplu și ușor și să vă bucurați de o provocare, CSS este calea de urmat!
