Alustage CSS-i hulknurkadega

Pikka aega on ristkülikukujuliste plokkide ja ringide põhiline struktuur, mis moodustab veebisaite, vaevanud nii disainereid kui ka loovaid arendajaid. Nii et kui CSS-i klipiga raja polügoonid tulid WebKiti brauserites areenile, põlesin kohe põnevusest.

Kasutatakse peamiselt teksti pakkimiseks ja sisu maskeerimiseks, pakub vara ka disaineritele võimalust luua puhtas CSS-is põnevamaid kujundeid, ilma et oleks vaja lõuendit või SVG-d. Tundsin, et see võib muuta minu kujundamise ja arendamise viisi, mille tulemused ei mõjutaks kaua aega.

Clip-pathi peamine eesmärk on piirkonna (mitte ainult piltide, vaid tegeliku sisu) varjamine, kuid selles õpetuses uurin konkreetselt, mida saab polügooni atribuudiga teha. Tutvustan teid, kuidas saab Sass for-loopsi kasutada ulatuslike üleminekuefektide loomiseks ja CSS-i hulknurkade kogu äratamiseks.

Looge divide komplekt

Loome fänniefekti, kus kõik seitse kolmnurkset polügooni animeerivad keskpunktist välja

Loome fänniefekti, kus kõik seitse kolmnurkset polügooni animeerivad keskpunktist välja

Meie eesmärk on efekt, mille korral kolmnurkse kujuga komplekt lehvib keskpunktist välja (vaadake välja selle õpetuse Codepen ). Kõigepealt peate looma div-sid nii paljude hulknurkade jaoks kui vaja (siin kasutan seitset) ja asetama need üksteise peale.

.polygon-wrap { div { position: absolute; width: 500px; height: 275px; top: 0; left: 0; } }

Looge hulknurkade esimene olek

Läheme üle hulknurkadele, nii et ventilaator kasvab keskelt väljapoole. Selleks tahame kõigepealt määratleda polügoonide algse oleku. Lisame taustavärvi, mis maskeeritakse teie loodud kuju järgi automaatselt:

.polygon-wrap { div { -webkit-clip-path: polygon(50% 95%, 50% 95%, 50% 95%); background-color: #46008C; } }

Animatsiooni päästik

Ülemineku toimumiseks vajate liikumise päästikut. Siin paigutame hõlpsasti oleku ümbrise elemendile.

.polygon-wrap:hover { }

Loo hulknurgad

Pigem rõõmustavalt luuakse CSS-i hulknurgad, kasutades ainult ühte koodirida. Hulknurgad võivad olla mis tahes vormis, mis teile meeldib: need ei ole seotud ühegi arvu punktide ega külgedega. Kui aga teisaldate kuju, nagu siin oleme, pidage meeles, et iga järgmise punkti animeerimiseks kasutage sama arvu punkte ja sama massiivi punkti:

..polygon-wrap:hover { div:nth-child(1) { -webkit-clip-path: polygon(19% 42%, 26% 32%, 50% 95%); } }

See hulknurk võtab kolmnurkse kuju, mis moodustab seitsmeosalise ventilaatori vasakpoolse külje. Protsendiväärtused joonduvad X- ja Y-koordinaatidega, lähtudes algdiv suurusest.

Üleminekud silmuse kaudu

Kui olete oma hulknurkade teise oleku loonud, saate Sass for-loopide abil luua ulatusliku üleminekukomplekti. Need põhjustavad iga div animeerimist oma eelkäijast veidi aeglasemalt, tekitades segamise tunde. See suurendab ka jõudlust, kuna protsessor teeb üht ja teist, mitte seitset asja korraga.

.polygon-wrap { div { transition: 0.2s; @for $i from 1 through 7 { &:nth-child(#{$i}) { $tdelay: ((($i*0.1))+0.2s); $tduration: ($i*0.05 + 0.25s); transition-delay($tdelay); transition-duration($tduration); } } } }

See koodibitt loob sisuliselt erinevuse iga div-i ajastuses. Esialgne puhver on ülemineku alus (siin, 0,2 sekundit). Järgmisena on viivituse väärtus (0,1 sekundit). Üleminekuviivituse saamiseks korrutatakse see väärtus div järjekorranumbriga (ühest seitsmeni).

Tükkidena

Tükkidena

Tükkidena

Isiklikus projektis Tükkidena , Kasutasin seda sama hulknurga omadust 30 erineva ohustatud looma kujutiste loomiseks, millest igaüks koosnes 30 kolmnurksest 'tükist'. Kasutasin põhilisi CSS-i üleminekuid, et seguneda loomalt loomale üle ekraani laialivalguva liigutusega. Loomad näivad muutuvat üksteiseks; selles õpetuses käsitletud üleminekuviivituste abil loodud efekt.

In Pieces'is luuakse liikumine järjestikku. div elementidele antakse lapsindeksi täisarvud, mis seejärel korrutatakse kindla väärtusega, et anda viivitusaeg. Kasutasin 30 üksikut hulknurka sisaldades 30 div-elementi. Seejärel võtsin kasutusele üleminekuviivituse 0,1 sekundit, nii et kümnes hulknurk animeerus ühe sekundi pärast (0,1 x 10) ja 30. hulknurk läks üle kolmesekundilise (0,1 x 30) järel.

Pimendav efekt

Neid viivitusi kasutati ka loomade jaoks 'virvendamise' loomiseks, mida on võimalik iga paari sekundi tagant näha. Viivituste järjestus võimaldab kõigi elementide lihtsat läbipaistmatust lülitada, luues valguse mõjule sarnase suure sära. See on väga konkreetne näide ja selliste viivituste kasutamine ei piirdu ainult CSS-i hulknurkadega.

See, mida need viivitused konkreetselt saavutavad, on liikumise voolavuse element, mis loob palju loomulikuma animatsiooni. See on peen, kuid tohutult tasuv puudutus. Ilma selle segunemiseta võib hulk muudetuks muutuvate hulknurkade hulk olla silmale väga karm. See tagab ka parema jõudluse, kuna samaaegseid liigutusi on vähem.

Järeldus

Seal see teil on! See on suurepärane viis järjestatud liikumiste loomiseks polügoonidega. CSS-i hulknurkadega avastamiseks on palju põnevaid loomingulisi võimalusi, nii et mängige ringi ja vaadake, mida saate nende kujunditega teha.

Sõnad : Bryan James

Bryan James on vabakutseline disainer ja loominguline kooder Tükkidena . See artikkel avaldati algselt väljaande 272 väljaandes netiajakiri .

Meeldis see? Loe neid!