Hogyan készítsünk egy Reddit által ihletett betöltő fonót, amely csak HTML-t és CSS-t tartalmaz

A Reddit mobilalkalmazása meglehetősen feltűnő rakodógéppel rendelkezik, amely a bolygón vagy a csillag körül keringő orbitális testekre emlékeztet. A legtöbb fejlesztő JavaScripthez vagy SVG-hez nyúlna egy ilyen feladatért, de ennek köszönhetőenanimation-iteration-count: infinite;és még néhány hack és trükk, ez nem is szükséges. Ma megmutatom, hogyan kell kódolni egy Reddit által inspirált fonót pusztán HTML-ben és CSS-ben!

Íme a végeredmény:

Alapbeállítások

Kezdjük azzal, hogy írunk néhány HTML DOM elemet, amelyekre rátűzhetjük a középső kört és az egyes forgó pályákat.

 ... ... 

Az inner-spinés outer-spinelemek minden animálandó szülőcsomópontjai lesznek, és végül ezekre a szülőcsomópontokra alkalmazzuk a CSS kulcskép-átalakításokat.

A fenti kódpéldában az ellipszisek ( ) az ívek és a keringő „holdak” előtt állnak. A belső és a külső gyűrű egyaránt tartalmaz két ívet és két holdat, de valamivel később tisztázódó okokból mindegyik ív valójában két CSS alakból áll, így összesen nyolc ívre és négy holdra van szükségünk. A HTML teljes egészében így néz ki:

CSS-alakzatok

Körök és ívek rajzolása CSS-ben egyszerűen négyzet létrehozásával border-radiusés 50% -os beállítással lehetséges .

A szegély mindkét oldala különböző színű lehet, vagy beállítható transparent. A background-colortulajdonság beállítja az alak kitöltését, ha van ilyen.

Könnyű 90, 180 és 270 fokos íveket megrajzolni, ha egyszerűen a határ egy vagy több oldalát átlátszóvá állítja be. Azonban, ha alaposan megnézi az oldal tetején lévő fonót, észreveszi, hogy az egyes pályák „farka” rést hagy maga mögött és a hold között. Ez azt jelenti, hogy bár az ívhossz megközelíti a 180 fokot, kissé félénkek a 180-tól.

A szabálytalan hosszúságú körszegmensek CSS-be való rajzolásához egy kis feltörés szükséges. Ehhez meg kell rajzolnunk két szomszédos, 90 fokos ívszegmenst, és kissé el kell forgatni az egyiket úgy, hogy átfedjék egymást, így a látszólagos ívszakasz körülbelül 160 fokos marad.

Ha most visszatekintünk a HTML-re, akkor most megtudhatjuk, miért állítottunk be két csomópontot minden ívhez (an arc_startés arc_end). Ezeket egyetlen átfedő ív minden egyes részének ábrázolására használják, amelyek az egyes pályák farkát képviselik.

A CSS beállítása

Először beállítunk egy CSS változót, amely a fonó színét képviseli, és egy másik változót, amely -50%, -50% fordítást jelent, amelyet az egész CSS-ben használunk az alakzatok középre állításához a középpontjuk körül ( bal felső sarkuk, ami az alapértelmezett).

html { --spinner: #1EAAF0; --center: translate(-50%, -50%); }

Most mehetünk előre, és megrajzolhatjuk a központi kört is.

.center { position: absolute; width: 30px; height: 30px; background: var(--spinner); border-radius: 50%; top: 50%; left: 50%; transform: var(--center); }

Az egyes pályák gyermekcsomópontjai a inner-spinés nevű szülőcsomópontokba vannak zárva outer-spin. Egyelőre csak arra használjuk őket, hogy a fonót az ablakon középre állítsuk.

.outer-spin, .inner-spin { position: absolute; top: 50%; left: 50%; }

A pályák rajzolása

A betöltő fonó alapvetően koncentrikus körök sorozata, ezért először csak egy ív megrajzolására összpontosítsunk.

Mivel mindegyik ív két átfedő szakaszból áll, kezdjük el, ha csak két ívet rajzolunk egymás után.

.inner-arc { width: 62px; height: 62px; } .inner-arc_start-a { border-color: transparent transparent transparent green; /* NOTE: the order here very much matters! */ transform: var(--center) rotate(0deg); } .inner-arc_end-a { border-color: red transparent transparent transparent; transform: var(--center) rotate(0deg); }

Az első transzformáció az ablak középpontját képezi. Az elforgatás nulla fokra van állítva az ívek alapértelmezett állapotának megjelenítéséhez.

Figyelje meg, hogy az ívek nem egyeznek az egység kör x-keresztezéseivel. Ennek kijavítására és az ívek megkönnyítésére a munka érdekében az íveket 45 fokkal elforgatjuk. Ezután kissé átforgatjuk az egyik ívet, hogy a teljes ívhossz körülbelül 160 fok legyen.

.inner-arc_start-a { border-color: transparent transparent transparent green; transform: var(--center) rotate(65deg); } .inner-arc_end-a { border-color: red transparent transparent transparent; transform: var(--center) rotate(45deg); }

Ezután az egyik orbitális holdat az x tengely mentén mozgatva helyezhetjük el. Sajnos, a vektorgrafikákkal, például az SVG-kkel ellentétben, a CSS szegélyek nem szélesség nélküli vektorok, amelyek elfogadják a körvonalstílust. Ez azt jelenti, hogy a távolságokat nem méri automatikusan a vonal középpontjáig. Az objektumok pozícionálásakor figyelembe kell venni a szegély szélességét.

Ennek eredményeként néhány „mágikus szám” keletkezik, amelyeket valószínűleg minimalizálhatnánk, ha több CSS-változót szeretnénk beállítani, és használni szeretnénk a calc()függvényt. Ez azonban kissé érintettnek tűnik, ezért egyelőre csak a kört képpontonként pozícionálom.

.inner-moon-a { position: absolute; top:50%; left:50%; width: 12px; height: 12px; background: red; border-radius: 50%; transform: var(--center) translate(33px, 0); }

Ezután rajzolunk még két ívet, de ezúttal a scale(-1, -1)transzformációt használjuk . Ez átfordítja az íveket mind az x-, mind az y-tengelyen, lényegében tükrözi a kontúrt.

.inner-arc_start-b { border-color: transparent transparent transparent var(--spinner); transform: var(--center) rotate(65deg) scale(-1, -1); } .inner-arc_end-b { border-color: var(--spinner) transparent transparent transparent; transform: var(--center) rotate(45deg) scale(-1, -1);

Végül a külső pályára egyszerűen megismételjük a CSS-t a belső pályáról, de nagyobb magasságot és szélességet állítsunk be ! (Képzelje el, milyen rövid lehet ez a CSS a SASS mixekkel!)

.outer-arc { width: 100px; height: 100px; }

Az animáció hozzáadása

Az utolsó lépés az animáció hozzáadása. Először hozzá kell adnunk egyetlen kulcskép-elemet, amely beállítja az animációs viselkedés típusát és az animáció által végrehajtott CSS-elemeket, ebben az esetben egy transformtulajdonságon keresztüli forgatást .

@keyframes spin { 100% {transform: rotate(360deg); } }

A „ spin” azonosító összekapcsolja a kulcsképeket az animációs attribútumokkal, amelyeket hozzáadunk az egyes szülőelemekhez . Az animáció tulajdonság az animáció időbeli információit állítja be, vagyis minden pálya különböző sebességgel fog keringeni.

.outer-spin { animation: spin 4s linear infinite; } .inner-spin { animation: spin 3s linear infinite; }

Ez az!

The code for this tutorial can be found on CodePen.io. Please comment — or Tweet at me @PleathrStarfish — if you have a suggestion, observation, or a cool fork of my code!