Animált diagram a css3-on
Ma animációs grafikát hozunk létre a CSS3-mal. Korábban valamit hasonlítottunk Jquery segítségével, de itt az ideje, hogy végül megszabaduljunk a terjedelmes plug-inektöl, egy csomó felesleges funkcióval.
Megjegyezzük az alapvető követelményeket. Diagramunknak:
- független a háttértől
- adaptív (bármilyen oszlopszám esetén)
- skálázható (például vektoros grafika)
- könnyen állítható (szín, méretek és arányok)
Kezdjük a sorrendben.
Egy mozgó belső tömböt tartalmazó oszlop.
Oszlopunkat egy 6 oldalas négyszögletes párhuzamos alakú formában kell bemutatni, míg a belső blokknak függőlegesen kell haladnia. Meg kell adnod a lehetőséget, hogy elrejtsd ezt a blokkot. Ehhez csak öt blokkelemre van szükségünk:
- 1 div a hátsó részhez, amely 3 oldalból áll (hátsó fal, alap és bal fal)
- 1 div az elülső részhez, 3 oldalból áll (első, felső és jobb falak)
- 1 div egy beltéri egységhez, amely 3 oldalból áll, mint az elülső, de alacsonyabb z-index tulajdonsággal
- 1 tartályt, hogy mindhárom rész hozzáálljon hozzá, és egyetlen háttérképet alkalmazzon a jobb alsó sarokban
- 1 tartály túlcsordulással: elrejtve. A belső blokk elrejtése az oszlop alatt, amikor leesik
Lehet, hogy vajon miért van szükségünk két tartályra? Nem könnyű megérteni, szóval megmagyarázom. Egy oszloponként legalább 1 konténerre van szükség (így elrendezhetjük az elülső, a hátsó és a belső falat is). Ezenkívül oszlopunk skálázható, ezért az oszlop kitöltésének ellenőrzésére a százalékos arányt használjuk. Ehhez a tartályunk magasságának meg kell egyeznie a poszt egyik oldalának magasságával.
Ezután egy gombnak kell lennie, amellyel elrejtheted a belső blokkot, vagyis az egységünk "a bár alatt" kell mennie és eltűnik. A túlcsordulást: rejtett tulajdonságot alkalmazhatja. de nem ez a tartály, mivel annak magassága kisebb, mint az oszlop tényleges magassága. Még egy tartályt adunk hozzá, és már túl van rajta: rejtett. És így kiderült, két konténer.
A diagram belseje a CSS3-ban.
Ideje dolgozni a belső téren az oszlopdiagramon, hogy minden szép és funkcionális legyen. A követelmények elég kemények:
- mindent a 3D-ben, akkor szükség van három síkra (hátsó falra, alsó és balfalra)
- nem függ a háttértől
- Ne függjen az oszlopok számától és jellemzőitől (magasság, szélesség stb.)
- Az X- és Y-tengelyeknek a megfelelő címkéken kell lenniük
Ehhez szükségünk van:
- 1 rendezetlen lista ul
- 1 elemet az X-tengely címkék egyes elemeiben
- 1 oszlopon belül
- 1 listaelemet egy nem rendezett listán belül az Y tengelyen lévő címkékhez
Rendetlen lista, kérdezed? Van-e szemantikaibb, hogy nem használják a dl definíciós listát egy oszlopdiagramhoz? Talán, de nem használhatjuk, mert minden egyes oszlopot és címkét az X tengelyen egy tartállyal kell eltakarnunk egymáshoz viszonyítva.
Ezenkívül nem használhatjuk a listaelemet az oszlop második tartálya helyett, hiszen az X tengely címkéket az ábrán kívül kell elhelyezni, és mivel tudjuk, hogy a második oszlop tárolója elrejti a nagyobb vagy azt meghaladó tartalmat, használjuk a lista elemei annak érdekében, hogy minden elem helyesen legyen elhelyezve.
végrehajtás
Ideje befejezni az elméletet és részt venni a kódolásban. A mozgó beltéri egységet tartalmazó oszlop kódja így néz ki:
Beszéljük újra az egyes blokkok célját:
- .bar-wrapper - elrejti a .bar-belső. ha az oszlop alatt van
- .bar-container - a relatív elhelyezkedéshez. bar-előtér. .bar-belső és .bar-előtér
- .bar-background - a ház három oldalát hozza létre: hátsó, alsó és bal oldali
- .bár-belső - oszlopunk belső tömbje
- .bar előtér - a ház fennmaradó 3 oldalát hozza létre: első, felső, jobb
Kezdjük, kiadjuk a konténereket
Vegye figyelembe, hogy az .bar-konténer elem szélessége 12.5em. Ez a szám megegyezik az elülső (10em) szélesség és az oszlop jobb (2.5em) oldalának szélességével. Határokat is használunk, hogy háromszög alakzatot hozzunk létre a határ-stílusú tulajdonságokkal. határ szélesség és határszín. Ezt a háromszöget az .bar-konténer elem jobb alsó sarkában helyezzük el annak érdekében, hogy függőlegesen mozogjon az oszlop belseje.
És most menj tovább a hátsó falhoz:
Amint láthatja, az ügyet 2,5 m-re mozgatjuk jobbra, majd balra és alulra döntjük 45 fokkal. Vegye figyelembe a vonal transzformációját is: ferde (0deg, -45deg); Ha az X tengely lejtését 0 fokra állítja, az Y tengely pedig -45 fokkal függőlegesen billenteti az alsó falunkat.
Folytassuk az elülső falat.
Itt minden ugyanaz, mint a hátsó fal stilizálása, csak az átalakulás a másik irányba. Ezenkívül a ház mindkét oldalára és a beltéri egységre ugyanazokat a stílusokat alkalmaztuk, mivel ugyanazok a tulajdonságok.
Most meg fogjuk alakítani a beltéri egységet.
Meghatároztuk oszlopainkat, és most a külső tervezéssel foglalkozhatunk:
Amint korábban említettük, egy rendezetlen listát és span címkéket használunk, amelyek címkéket helyeznek az X és Y tengelyekre.
Itt a nehézség a háttérben rejlik. Egy lineáris gradienst használunk a diagramtartály kitöltéséhez és felemeljük a 2.5em értékre. Miért? Az a tény, hogy a magassági táblázatunk alja 2,5 méternél, 45 fokkal megdőlt, így a jobb alsó sarokban üres hely marad.
Most lépjünk tovább az alsó rész megformálásához.
45 fokot döntünk, és kissé balra mozdítjuk a magasság 1/2 -hoz képest (ahogy az átalakulás az alsó blokk bal és jobb szélének közepén áthaladó tengelyhez képest történt). Ennek az elmozdulásnak köszönhetően az alsó rész szorosan egymás mellett helyezkedik el a bal oldali falhoz. Ezután állítsa be a szélességet 100% -ra, hogy meggyőződjön róla, hogy kitölti az összes hozzárendelt tárterületet. Most menjünk a bal oldalon:
A fenti magyarázatok után könnyedén megértheted a kódot. Ebben 45 fokkal döntjük az elemet, és enyhén mozgatjuk a szélesség 1/2-ig. Most stilizáljuk oszlopainkat:
Megmagyarázom, mi történik itt. Az oszlopokat egymás mellé építjük az úszó tulajdonság használatával. Ezután hozzáadjuk a behúzási jogot a diagram utolsó oszlopához. Ez a jobb alsó sarokban látható. Próbálja meg eltávolítani ezt a paramétert, és azonnal látni fogja, mi történik. És végeredményben stilizáljuk a címkéinket az X tengely mentén.
Rendben, készen vagyunk. Most az Y tengely mentén stilizálni kell a jelzőket, és lehetővé válik a szellem lefordítása:
Amint a kódból látható, a tengely szélességét 100% -kal egyenlő markerekkel jelöltük ki. Ehhez egy vonalat kell rajzolni az egész diagramon, meg kell jeleníteni a pontozott vonalakat az Y tengelyen, és el kell rendezni a span elemet, hogy az Y tengely címkék a diagramon kívül legyenek. A következővel: előtte és után: egyszerűen meg tudjuk csinálni, és nem ássuk el a html kódot.
Így befejeztük a grafikon kialakítását, de nem adtunk meg olyan fontos változókat, mint a méretek, a színek és az oszlopok kitöltésének szintje! Az a tény, hogy a diagramunk testreszabható, ezért úgy döntöttünk, hogy nem keverjük össze a változókat a kód többi részével, így önmagunk megváltoztathatja azokat.
A demo fájlban talál néhány eltérést a kódban. Ez azért van, mert úgy döntöttünk, hogy a rádiógombokat a táblázatok jellemzőinek megváltoztatása nélkül módosítjuk a kódot. Ne habozzon elolvasni a forráskódot. Ha azonban csak statikus diagramra van szüksége, használja a fenti kódrészletet, és tegye meg a saját módosításait.
utószó
Végezetül emlékezzünk a CSS-tulajdonságokra, a technikáinkra, amelyekkel találkoztunk a diagramm mestereivel, de amelyek nem kaptak megfelelő magyarázatot:
- transzformáció: skew () és forgatás (), hogy elemeit olyan módon alakítsuk át, hogy együtt alakítsák ki a háromdimenziós tér
- ál-osztályok: előtte és után: elemek generálásához CSS-en keresztül és egyszerű HTML jelöléshez
- pszeudoosztályok: nth-last-child () és: nem szükségesek specifikus listaelemek meghatározásához és annak érdekében, hogy elkerüljék a további / id osztályok hozzáadását a jelöléshez
- lineáris gradiens háttér pozícióval, ha részlegesen tölti ki egy elemet háttérrel
- rgba () az áttetsző háttér számára
- határ: háromszög alakú formák létrehozása
- egység