Luo animoitu CSS-taide

Sep 12, 2025

Miten tehdään

(Kuva luotto: Tiffany Choong)

CSS-kuvien luominen on hauska tapa harjoittaa taitojasi ja luoda siisti taideteos. Se on mukava tauko tavallisesta päivittäisestä muotoilusta verkkokomponenteista. Kaikki sinun täytyy aloittaa, on tyhjä asiakirja ja CSS-tiedosto; Suosittelemme Sassia, joiden avulla voit käyttää tyylejä uudelleen ja kirjoittaa yksinkertaisempia valitsimia (katso opas Mikä on sass? Lisätietoja tästä esikäsittelystä).

Aloitamme joitakin parhaita vinkkejä CSS-taiteen hallitsemiseen, näytä sitten sinulle, miten luodaan tämä animoitu ilmapallo Pikachu käyttämällä vain CSS: tä (varmista, että pidät tiedostot turvallisina kunnollisina pilvivarasto ).

Lisää inspiraatiota, tutkia hämmästyttävää CSS-animaatioesimerkkejä . Jokin perustiedot? Aloita oppimisesta Miten luodaan jäätä CSS: n avulla .

Tai jos aloitat uuden sivuston, oja monimutkaisuus loistavalla Verkkosivuston rakentaja ja varmista, että saat sivujen ylläpito naulankantaan.

Vähennä suunnittelua yksinkertaisiin muotoihin

CSS-taidetta luotettaessa, se voi auttaa tarkastelemaan muutamia viitekuvia inspiraatiota varten ja luovat yksinkertaistetun sarjakuvan vaihtelun, kun lähdet, kuvataan aihetta käyttämällä primitiivisiä muotoja, mikä tekee paremmasta CSS-muodot .

Käytä kirkasta taustaa auttamaan paikannus

Kun vastaavia värejä päällekkäisiä muotoja on vaikea nähdä, missä heidät sijoitetaan tai mitä he näyttävät. On hyödyllistä saada muoto, jota työskentelet erottumalla muuttamalla taustaväri Jotain kirkkaa ja pirteää, kuten Magenta. Tämän avulla voit helposti nähdä elementin tarkan sijainnin ja muodon.

Käytä nesteen koot

Kun on kyse PX-arvon määrittämisestä ominaisuuksille, suosittelemme REM-yksikön käyttöä. Jos haluat, että haluat, että koko pala on suurempi tai pienempi, käyttämällä REM-yksiköitä, sinun on vain vaihdettava perusta HTML {font-koko: ... px} Sassissa koko taidetta ylös tai alas.

Kun määritellään lapsen elementtien korkeudet ja leveydet, joiden pitäisi olla suhteellinen mitoitus vanhempaan, prosenttiosuudet ovat kätevästi. Koska nämä arvot ovat aina suhteessa vanhempiaan, niiden on myös laadittava HTML Font-koko .

Generate CSS — Luo CSS on BLOQ, netto- ja web-suunnittelija tuomitava konferenssi. Klikkaa varata varhainen lintulippu! (Kuva luotto: Getty / Future)

01. Aloita säiliöillä

Käärepakkaus, joka pitää taideteosten palaset, on hyvä paikka aloittaa. Säiliössä voimme sijoittaa kolme sisäastia - pää, keho ja ilmapallot.

 & lt; div luokka = "kontti" & gt;
& lt; div luokka = "pää" & gt; & lt; / div & gt;
& lt; div luokka = "keho" & gt; & lt; / div & gt;
& lt; div luokka = "ilmapallot" & gt; & lt; / div & gt;
& lt; / div & gt;

Säiliön tulisi yleensä olla Asema: Suhteellinen Jotta muut elementit voidaan sijoittaa suhteellisen sisälle käyttämällä Paikka: Absoluuttinen ja niillä on hyvin määritelty korkeus ja leveys, muuten sijoittaminen lapsielementit vaikeutuvat.

Lisää teidän tyylit, lisää perusvärit SASS-muuttujiksi uudelleenkäytettävyydelle. Sass keventää() ja tummentaa() Toiminnot luovat värisävyt ja sävyt, joita voidaan käyttää kohokohdista tai varjona.

02. Tyyli pää

Kun rakenne tajusimme, pään tyyli ensin. Tällöin pää tekee kuvitteellisen keskipisteen taiteen sijaan sen sijaan, että se asetetaan absoluuttiksi, se voidaan asettaa suhteelliseen. Tämä mahdollistaa säiliön stabiilin elementin sisälle, jolloin muut kelluvat absoluutiset elementit ankkuripisteeksi ja siten kontrolliksi niiden asennossa.

Kasvoominaisuudet tarvitsevat säiliön paikannus, joten luo a & lt; div & gt; Päänsäiliön sisällä keltainen muoto leveys, korkeus ja taustaväri - nyt tehdä tämä suorakulmio näyttää enemmän pään muoto. Yksi CSS-taiteen yleisimmistä ja hyödyllisimmistä ominaisuuksista on raja-säde Kiinteistö, joka muuttaa laatikon kulmien x tai y: n käyrää ja sitä voidaan käyttää luomaan enemmän orgaanisia muotoja.

Tämän tekniikan avulla REM- ja prosentuaalisen yhdistelmän avulla voit tehdä Blob-kaltaisia muotoja pikemminkin kuin pelkkää ellipsiä, mikä on luonnollisesti asteittain html {Font-koko: ... px} :

 .face {
Border-Top-Left-RADIUS: 50% 4.5rem;
Ryhmän huippu-oikea säde: 50% 4.5rem;
Border-Bottom-Left-Säde: 50% 3rem;
Border-pohja-oikea säde: 50% 3rem;
...
}

Päätän jälkeen raja-säde , Aseta loput kasvojen ominaisuuksista pään lapsielementteinä, kuten silmät, posket, nenä ja korvat. Kuten pää, raja-säde temppu tulee käteväksi Border-RADIUS: 50% ei ehkä näytä houkuttelevalta.

03. Siirry kehoon

Vartalo & lt; div & gt; voidaan sijoittaa kehon säiliöön pään takana ja muotoilla samalla tavalla raja-säde tekniikka sekä aseet, jalat ja häntä. Oikean päällekkäisyyden sallimiseksi todellisen kehon pitäisi olla oma elementti, koska tiettyjä sisäisiä elementtejä, kuten takapihat, on katkaistu ylivuoto piilotettu . Antaa keholle syvyyttä, Muunnos: vinossa () omaisuus voi lakkailee kehon hieman.

Lightning pultti häntä voidaan rakentaa käyttämällä kolme erillistä suorakulmiota sen sijaan, että yrität muodostaa tämän muodon yhdestä elementistä. Suorakulmioita voidaan kiertää ja sijoittaa toistensa yläosan päälle pultin muodostamiseksi. Varret ja jalat voivat käyttää tummempaa ensisijaista väriä, jonka luomme Sass tummentaa() Joten he erottuvat.

04. Lisää ilmapallot

Nyt kun sähköhiiri on valmis, pidä palloja takaisin. Lisää joitakin & lt; div & gt; s jaettuja tyylejä, joissa on lapsijono & lt; div & gt; ja aseta ne nousevat pään yläpuolelle. Merkkijono on näkymätön, paitsi a raja-vasen , mikä auttaa näyttämään merkkijonoista.

Sitoa merkkijono merkin vyötärön ympärille, a & lt; div & gt; Voidaan sijoittaa kehoon, jotta oikea paikannus voitaisiin. String tarvitsee pienen käyrän, joka näyttää siltä, että se on sidottu kehon ympärille, joten se voi olla pieni korkeus, raja-ala ja a raja-ala Vasen ja oikea säde, joka tekee ohut kaareva linja:

 .string {
Korkeus: 1rem;
Leveys: 9rem;
Raja-oikeus: kiinteä 1px $ valkoinen;
Border-Left: Solid 1px $ White;
Border-pohja: kiinteä 1px $ valkoinen;
Border-bottom-vasen säde: 50% 1Rem;
Border-pohja-oikea säde: 50% 1rem;
}

05. Animoida CSS

Voimme antaa luonteen käyttöiän lisäämällä @KeyFrames Animaatiot. Kädet, jalat, korvat ja häntä voidaan animoida Muunnos: Kierrä () . Varmista muunnos on asetettu "liitokseen" (eli yläkeskukseen jalkaan) ja säädä kierto. Tätä animaatiotyyppiä voidaan käyttää useita kertoja Sass Mixin:

 @mixin animaterote ($ nimi, $ aloitus, $ lom) {
@keyframes # {$ NAME} {
0%, 100% {Muunnos: Kierrä (# {$ start} deg)}
50% {Muunnos: Kierrä (# {$ End} deg)}
}
}

Lopuksi, lisäämällä hitaasti 5s Muuntaminen: Translatey () Keyframe-animaatio animoi luonteen ylös ja alas ikään kuin se kelluu. Realismin, vilkkuva animaatio käyttäen Muutos: Scaley (0,1) Kiinteistöä voidaan käyttää, mikä näyttää siltä, että silmät sulkeutuvat.

Tämä artikkeli julkaistiin alun perin Creative Web Design Magazine netto . Osta numero 283 tai tilata .

Lue lisää:

5 Asiat, joita et koskaan tiennyt CSS: stä
Lisää SVG-suodattimet CSS: llä
MITEN SMART TEXT EFFECTS CSS: n kanssa

Luo animoitu CSS-taide

01. Aloita säiliöillä

02. Tyyli pää

03. Siirry kehoon

04. Lisää ilmapallot

05. Animoida CSS

Miten tehdään - Suosituimmat artikkelit

Miten kuvakäsikirjoitus Photoshopissa

Luo hiiren ohjattu parallax taustavaikutus

Kuinka luoda 3D-skannaus todellisuuden kaappauksella

Luo hehkuva neon-tekstin vaikutus

Käytä WordPressia nimettömänä CMS

19 Vihjeitä Great Poser Art

Kuinka digitaalisesti veistää Zbrushcore

Kuinka kaapata valon öljyillä

Luokat