Creați artă CSS animată

Feb 4, 2026
să
CSS art
(Credit de imagine: Tiffany Choong)

Crearea imaginilor CSS este o modalitate distractivă de a vă practica abilitățile și de a crea o lucrare de artă îngrijită. Este o pauză plăcută de la stilul obișnuit de zi cu zi al componentelor Web. Tot ce va trebui să începeți este un document gol și un fișier CSS; Vă recomandăm să utilizați SASS, care vă va permite să vă reutilizați stilurile și să scrieți selectori mai simpli (consultați ghidul nostru Ce este SASS? pentru a afla mai multe despre acest preprocesor).

Vom începe cu câteva sfaturi de top pentru mastering CSS Art, apoi vă vom arăta cum să recreați acest balon animat pikachu folosind numai CSS (asigurați-vă că păstrați fișierele în siguranță în decente Stocare in cloud ).

Pentru mai multă inspirație, explorați rotundul nostru uimitor Exemple de animație CSS. . După ceva mai de bază? Începeți prin învățare Cum de a crea o gheață lolly folosind css .

Sau, dacă începeți un nou site, șanțați complexitatea cu un strălucit Builder de site-uri web și asigurați-vă că vă veți obține web hosting exact.

Reduceți designul la forme simple

Când creați o artă CSS, poate ajuta la a vă uita la câteva imagini de referință pentru inspirație și apoi creați o variație simplificată de desene animate pe măsură ce mergeți, imaginând subiectul folosind forme primitive, care fac mai bine Forme CSS. .

Utilizați un fundal luminos pentru a vă ajuta cu poziționarea

La suprapunerea formelor de culori similare, este dificil să vedeți unde sunt plasate sau cum arată. Este util să aveți forma pe care o lucrați afară prin schimbarea culoare de fundal la ceva luminos și vesel, ca și Magenta. Acest lucru vă permite să vedeți cu ușurință poziția exactă și forma elementului dvs.

Utilizați dimensiunile fluidului

Când vine vorba de definirea unei valori PX pentru proprietăți, vă recomandăm să utilizați unitatea REM. În cazul în care vă decideți că doriți ca piesa dvs. globală să fie mai mare sau mai mică, utilizând unitățile REM, trebuie doar să schimbați baza html {font-size: ... px} În SASS pentru a scala întreaga operație în sus sau în jos.

La definirea înălțimilor și lățimilor elementelor copilului care ar trebui să aibă dimensiuni relative la părinte, procentele vin la îndemână. Deoarece aceste valori sunt întotdeauna relativ la părintele lor, ar trebui, de asemenea, să scală cu html font-dimensiune .

Generate CSS

Generarea CSS este o conferință personalizată adusă la Creative Bloom, Net și Web Designer. Faceți clic pentru a rezerva biletul de păsări timpurii! (Credit Imagine: Getty / Viitor)

01. Începeți cu recipientele

Un recipient de ambalaj pentru a ține piesele de artă este un loc bun pentru a începe. În interiorul containerului, putem plasa trei containere interioare - capul, corpul și baloanele. 

 & Lt; Div clasa = "container" & gt;
& Lt; Div Clasa = "Head" & GT; / Lt; / Div & Gt;
& Lt; Div Clasa = "corp" & gt; / lt; / div & gt;
& Lt; Div Class = "baloane" & gt; / lt; / div & gt;
& lt; / div & gt;

Containerul ar trebui de obicei Poziție: Reluară Pentru a permite ca alte elemente să fie plasate relativ în interiorul acesteia utilizând Poziție: Absolut și au o înălțime și o lățime bine definită, elementele de poziționare a copilului devine dificil.

În stilurile dvs., adăugați culorile de bază ca variabile SAS pentru reutilitate. Sass. uşura() și întuneca() Funcțiile vor crea nuanțe și nuanțe ale culorilor dvs., care pot fi folosite ca fiind evidențiere sau umbre pentru caracterul dvs.

02. Stilul capului

Cu structura figurează, să formăm mai întâi capul. În acest caz, capul face un punct de centru frumos pentru opera de artă, mai degrabă decât să-și stabilească poziția la absolut, poate fi setat la relativă. Acest lucru permite ca recipientul să aibă un element stabil în interiorul acestuia, oferind celelalte elemente absolute plutitoare un punct de ancorare și, astfel, mai mult control asupra poziției lor.

Caracteristicile faciale vor avea nevoie de un container pentru poziționare, deci creați un a & Lt; div & gt; În interiorul recipientului de cap pentru forma galbenă cu o lățime, înălțime și culoare de fundal - acum să facem acest dreptunghi să pară mai mult ca o formă de cap. Una dintre cele mai frecvente și utile proprietăți din arta CSS este Raza de frontieră proprietate, care modifică curba x sau y a colțurilor unei casete și poate fi utilizată pentru a crea mai multe forme organice.

Folosind această tehnică cu un combo REM și procent, puteți face forme de tip Blob, mai degrabă decât elipse simple, care scară în mod natural cu HTML. {font-size: ... px} : 

 .Face {
Frontieră-Top-stânga-Radius: 50% 4.5rem;
Raza de frontieră-dreapta-dreapta: 50% 4.5rem;
Frontieră-stânga-Radius: 50% 3rem;
Raza de frontieră cu partea dreaptă: 50% 3rem;
...
}

După perfecționarea capului Raza de frontieră , poziționați restul caracteristicilor faciale ca elemente de copil ale capului, cum ar fi ochii, obrajii, nasul și urechile. Ca și capul, Raza de frontieră truc va veni la îndemână de atunci Raza de frontieră: 50% poate să nu pară atrăgătoare.

03. Deplasați-vă la corp

Un corp & Lt; div & gt; pot fi plasate în interiorul recipientului corpului din spatele capului și format cu același lucru Raza de frontieră Tehnica, precum și brațele, picioarele și coada. Pentru a permite o suprapunere adecvată, corpul real ar trebui să fie propriul element, deoarece anumite elemente interioare, cum ar fi dungile din spate vor trebui să fie întrerupte cu Depășirea: ascunsă . Pentru a da corpului mai adâncime, Transformare: Skew () proprietatea poate fi ușor corpul.

Coada șurubului fulgerului poate fi construită folosind trei dreptunghiuri separate, mai degrabă decât să încerce să formeze această formă de la un element. Dreptunghiurile pot fi rotite și poziționate peste partea superioară a celuilalt pentru a forma un bolț. Brațele și picioarele pot folosi culoarea primară mai întunecată pe care am creat-o folosind SASS întuneca() așa că ies în evidență.

04. Adăugați baloane

Acum că șoarecele electric este finalizat, să legați baloanele înapoi. Adauga ceva & Lt; div & gt; S Cu stiluri comune cu un șir de copii & Lt; div & gt; și poziționați-le bătuți deasupra capului. Șirul este invizibil, cu excepția unui frontieră-stânga , care ajută la arate mai mult șir.

Pentru a lega șirul din jurul taliei personajului, a & Lt; div & gt; pot fi plasate în interiorul corpului pentru a permite poziționarea corespunzătoare. Șirul are nevoie de o ușoară curbă pentru a apărea ca și cum ar fi legat în jurul corpului, astfel încât poate avea o înălțime mică, Front-Bottom. și a. Front-Bottom. Raza stângă și dreaptă, ceea ce face o linie curbată subțire: 

 .string {
Înălțime: 1rem;
Lățime: 9rem;
Border-dreapta: solid 1px $ alb;
Frontieră-stânga: Solid 1px $ alb;
Border-Bottom: Solid 1px $ alb;
Raza de frontieră-stânga-stânga: 50% 1rem;
Raza de frontieră cu partea dreaptă: 50% 1rem;
}

05. Animați CSS-ul

Putem da viața personajului prin adăugarea @keyframes. animații. Brațele, picioarele, urechile și coada pot fi animate cu Transformare: Rotire () . Asigurați-vă transformare-origine este setat la "articulație" (adică centrul de sus pentru un picior) și ajustați rotirea. Acest tip de animație poate fi utilizat de mai multe ori într-o mixin SASS: 

 @Mixin Animaterotate ($ nume, $ start, $ sfârșitul) {
@keyframes # {$ name} {
0%, 100% {transformare: rotiți (# {$ start} Deg)}
50% {Transform: Rotire (# {$} Deg)}
}
}

În cele din urmă, adăugând un lent 5s Transformare: Translatey () Keyframe animație va anima personajul în sus și în jos ca și cum plutește. Pentru o atingere de realism, o animație clipită folosind Transformare: scalea (0,1) Proprietatea poate fi folosită pentru a face să apară ca și cum ochii se închid.

Acest articol a fost publicat inițial în revista Creative Web Design net . Cumpăra problema 283. sau Abonati-va .

Citeste mai mult:

  • 5 lucruri pe care nu le-ai știut niciodată despre CSS
  • Adăugați filtre SVG cu CSS
  • Cum se codifică efectele text inteligente cu CSS

să - Cele mai populare articole

Cum de a alege un nume de site pentru afacerea dvs.

să Feb 4, 2026

(Credit de imagine: Yan din pexeli) Încercarea de a alege un nume de site web? Este unul dintre cele mai importante ..

Designer de afinitate: Cum să utilizați constrângerile

să Feb 4, 2026

Designerul afinității este un popular Vector art. instrument. Precum și versiunile Mac și Windows, ..

Cum să schițezi rapid mâinile

să Feb 4, 2026

Pentru a desena mâinile, trebuie să vă uitați trecând complexitatea anatomiei mâinii și să recunoașteți regulile simple..

Achiziționați modelul dvs. greu de suprafață în 3DS MAX

să Feb 4, 2026

În acest tutorial, voi împărtăși tehnicile și metodele pe care le folosesc pentru a crea modele de suprafață dur ..

Cum să ilustreze pentru un eveniment

să Feb 4, 2026

Crearea ilustrațiilor pentru un eveniment este o provocare creativă fantastică care implică povestile cu desenele care se hr�..

Creați gresie ornamentată în designer de substanțe

să Feb 4, 2026

Pagina 1 din 2: Proiectare și textură Podele 3D Proiectare și textură..

Cum se creează o cârpă reală CG

să Feb 4, 2026

Când lucrați cu pânză și țesături în 3D, poate fi greu să se obțină atât o rezoluție bună, cât și o privire minun..

Creați un mediu de joc în motorul ireal 4

să Feb 4, 2026

Folosind proiectul My Engine 4, ultima oprire ca exemplu, vreau să vă arăt câteva pași importanți pentru a continua atunci ..

Categorii