Aloita CSS-polygonien käyttö

Verkkosivustoja muodostava suorakaiteen muotoisten lohkojen ja ympyröiden perusrakenne on pitkään vaivannut suunnittelijoita ja luovia kehittäjiä. Joten kun CSS-leikepolun polygonit tulivat paikalle WebKit-selaimissa, palasin heti jännityksestä.



Ensisijaisesti tekstin käärimiseen ja sisällön peittämiseen, ominaisuus tarjoaa suunnittelijoille myös mahdollisuuden luoda mielenkiintoisempia muotoja puhtaassa CSS: ssä ilman kangasta tai SVG: tä. Tunsin, että se voisi muuttaa tapaani suunnitella ja kehittää tuloksia, joiden vaikutus ei kestää kauan.



Clip-polun ensisijainen tarkoitus on peittää alue (paitsi kuvat, myös todellinen sisältö), mutta tässä opetusohjelmassa aion syventyä erityisesti siihen, mitä monikulmio-ominaisuudella voidaan tehdä. Otan sinut läpi, kuinka Sass for-loop -silmukoita voidaan käyttää luomaan laajamittaisia ​​siirtymätehosteita ja herättämään kokoelma CSS-polygoneja eloon.

Luo div-joukko

Olemme luomassa tuuletinefektin, jossa jokainen seitsemästä kolmiomaisesta polygonista animoi keskipisteestä



Olemme luomassa tuuletinefektin, jossa jokainen seitsemästä kolmiomaisesta polygonista animoi keskipisteestä

Tavoitteenamme on vaikutus, jossa joukko kolmion muotoisia tuulettimia keskipisteestä (tarkista tämän opetusohjelman Codepen ). Ensin sinun on luotava divit niin monelle polygonille kuin tarvitset (tässä käytän seitsemää) ja sijoitettava ne päällekkäin.

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

Luo monikulmioiden ensimmäinen tila

Aiomme siirtyä monikulmioihin, jotta tuuletin kasvaa keskeltä ulospäin. Tätä varten haluamme ensin määrittää polygonien alkuperäisen tilan. Lisäämme taustavärin, joka peitetään automaattisesti luomassasi muodossa:

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

Animaatio laukaista

Tarvitset liikkeen laukaisimen, jotta siirtyminen tapahtuu. Tässä yksinkertaisesti sijoitetaan leijutila kääre-elementille.



.polygon-wrap:hover { }

Luo monikulmioita

Melko ilahduttavasti CSS-polygonit luodaan vain yhdellä koodirivillä. Monikulmioita voi olla missä tahansa muodossa: niitä ei ole sidottu mihinkään pisteisiin tai sivuihin. Jos kuitenkin siirrät muotoa kuten olemme täällä, muista käyttää samaa pistemäärää ja käyttää samaa taulukon pistettä jokaisen seuraavan pisteen animoimiseksi:

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

Tämä monikulmio on kolmion muotoinen, joka muodostaa seitsemän osan tuulettimen vasemman puolen. Prosentuaaliset arvot kohdistuvat X- ja Y-koordinaatteihin päädivin koon perusteella.

Siirtymät silmukan kautta

Kun olet luonut polygonien toisen tilan, voit luoda laaja joukko siirtymiä Sass for--silmukoilla. Nämä saavat jokaisen divin animoimaan hiukan edeltäjäänsä hitaammin, mikä luo 'sekoittavan' tunteen. Tämä parantaa myös suorituskykyä, koska prosessori tekee yksi asia toisensa jälkeen, eikä seitsemän asiaa kerralla.

.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); } } } }

Tämä koodibitti luo olennaisesti eron ajoituksessa jokaiselle div: lle. Alkuperäinen puskuri on siirtymän 'emäs' (tässä 0,2 sekuntia). Seuraavaksi on viive-arvo (0,1 sekuntia). Tämä arvo kerrotaan div: n järjestysnumerolla (yhdestä seitsemään) siirtoviiveen antamiseksi.

Palasina

Palasina

Palasina

Henkilökohtaisessa projektissa Palasina , Käytin samaa polygoniominaisuutta luodessani kuvia 30 eri uhanalaisesta eläimestä, joista kukin koostui 30 kolmion muotoisesta 'palasta'. Käytin perus CSS-siirtymiä sulautuakseni eläimestä eläimeen pyyhkäisevällä liikkeellä ruudun poikki. Eläimet näyttävät muuttuvan toisilleen; vaikutus, joka on luotu tässä opetusohjelmassa käsiteltyjen siirtymäviiveiden avulla.

In Pieces -liikkeessä liike luodaan peräkkäin. div-elementeille annetaan lapsiindeksien kokonaislukuja, jotka kerrotaan sitten tietyllä arvolla viiveajan antamiseksi. Käytin 30 div-elementtiä sisältämään 30 yksittäistä polygonia. Sitten otin käyttöön siirtymäviiveen 0,1 sekuntia, joten 10. polygoni animoitui sekunnin kuluttua (0,1 x 10) ja 30. polygoni siirtyi kolmen sekunnin kuluttua (0,1 x 30).

kuinka olla manga-taiteilija

Hohtava vaikutus

Näitä viivästyksiä käytettiin myös luomaan eläimille 'hohto', joka voidaan nähdä muutaman sekunnin välein. Viiveiden järjestys sallii yksinkertaisen peittävyyden kytkimen kaikkiin elementteihin, mikä luo laajan hehkun, joka muistuttaa valon vaikutusta lasiin. Tämä on hyvin spesifinen esimerkki, ja tällaisten viiveiden käyttö ei rajoitu vain CSS-polygoneihin.

Nämä viivästykset saavuttavat nimenomaan liikkeen juoksevuuden elementin, joka luo paljon luonnollisemman tunteen animaation. Se on hienovarainen, mutta erittäin palkitseva kosketus. Ilman tätä sekoittamista joukko monikulmioita, jotka muuttuvat joksikin muuksi, voivat olla silmälle erittäin ankaria. Se parantaa myös suorituskykyä, koska samanaikaisia ​​liikkeitä tapahtuu vähemmän.

Johtopäätös

Siinä sinulla on se! Tämä on loistava tapa tuottaa jaksotettuja liikkeitä monikulmioilla. CSS-polygonien avulla on paljon jännittäviä luovia mahdollisuuksia, joten pelaa ympäri ja katso, mitä voit tehdä näillä muodoilla.

Sanat : Bryan James

Bryan James on freelance-suunnittelija ja luova koodaaja, joka tunnetaan luomisesta Palasina . Tämä artikkeli julkaistiin alun perin nettilehti .

Piditkö tästä? Lue nämä!