Opret animeret CSS-kunst

Sep 12, 2025

hvordan

(Billedkredit: tiffany choong)

Oprettelse af CSS-billeder er en sjov måde at øve dine evner på og skabe et pænt stykke kunstværk. Det er en dejlig pause fra den sædvanlige daglige styling af webkomponenter. Alt, hvad du skal komme i gang, er et tomt dokument og en CSS-fil; Vi anbefaler at bruge SASS, som gør det muligt for dig at genbruge dine stilarter og skrive enklere vælgere (se vores vejledning til Hvad er sass? at lære mere om denne præprocessor).

Vi starter med nogle top tips til mastering af CSS Art, så vis dig, hvordan du genskabe denne animerede ballon Pikachu ved kun at bruge CSS (sørg for at holde dine filer sikkert i anstændigt Sky lagring ).

For mere inspiration, udforske vores rundup af fantastisk CSS animation eksempler . Efter noget mere grundlæggende? Start med at lære Sådan oprettes en islolly ved hjælp af CSS .

Eller hvis du starter et nyt websted, grøft kompleksiteten med en strålende Website Builder. og sørg for at du får din Web Hosting. nøjagtigt.

Reducer designet til enkle former

Når du opretter CSS-kunst, kan det hjælpe med at se på et par referencebilleder til inspiration og derefter skabe en forenklet tegneserievariation, når du går sammen, forestiller motivet ved hjælp af primitive former, hvilket gør det bedre CSS former. .

Brug en lys baggrund for at hjælpe med positionering

Når de overlapper figurer af lignende farver, er det svært at se, hvor de bliver placeret, eller hvordan de ser ud. Det er nyttigt at have den form, du arbejder på, skiller sig ud ved at ændre baggrundsfarve til noget lyst og cheery, som magenta. Dette giver dig mulighed for nemt at se den nøjagtige position og form af dit element.

Brug fluidstørrelser

Når det kommer til at definere en PX-værdi for egenskaber, vil vi anbefale at bruge REM-enheden. I tilfælde af at du beslutter dig for, at du vil have dit overordnede stykke til at være større eller mindre, ved at bruge REM-enheder, skal du kun ændre bunden html {font-size: ... px} i din sosse for at skalere hele kunstværket op eller ned.

Når du definerer højder og bredder af børnelementer, der skal have relativ dimensionering til forældrene, kommer procentsatserne praktisk. Da disse værdier altid er i forhold til deres forælder, bør de også omfatte html font-størrelse .

Generate CSS — Generer CSS er en skræddersyet konference bragt til dig af Creative Bloq, Net og Web Designer. Klik for at bestille din Early Bird Ticket! (Billedkredit: Getty / Future)

01. Start med containere

En wrapper beholder til at holde kunstværkets stykker er et godt sted at starte. Inden for beholderen kan vi placere tre indre beholdere - hovedet, kroppen og ballonerne.

 & lt; div class = "beholder" & gt;
& lt; div class = "head" & gt; & lt; / div & gt;
& lt; div class = "krop" & gt; & lt; / div & gt;
& lt; div class = "balloner" & gt; & lt; / div & gt;
& lt; / div & gt;

Beholderen skal normalt være Position: Relativ at tillade andre elementer placeret relativt inde i det ved hjælp af position: absolut Og har en veldefineret højde og bredde, ellers bliver positionering af børneelementer vanskeligt.

I dine stilarter skal du tilføje dine basisfarver som SASS-variabler til genanvendelighed. Sassen lette () og mørkere () Funktioner vil skabe toner og nuancer af dine farver, som kan bruges som højdepunkter eller skygger til din karakter.

02. Stil hovedet

Med strukturen regnet ud, lad os style hovedet først. I dette tilfælde gør hovedet et godt centerpunkt for kunstværket, så snarere end at sætte sin position til absolut, det kan indstilles til relativ. Dette gør det muligt for beholderen at have et stabilt element inde i det, hvilket giver de andre flydende absolutte elementer et ankerpunkt og dermed mere kontrol over deres position.

Facial-funktionerne vil have brug for en beholder til positionering, så opret en & lt; div & gt; Inde i hovedbeholderen til den gule form med en bredde, højde og baggrundsfarve - lad os nu gøre dette rektangel ser mere ud som en hovedform. En af de mest almindelige og nyttige egenskaber i CSS-kunst er den Border-Radius. Ejendom, som ændrer kurven på X eller Y af en kasse hjørner og kan bruges til at skabe mere organiske former.

Ved hjælp af denne teknik med en REM og Procent Combo kan du lave blob-lignende figurer i stedet for blot almindelige ellipser, hvilken skala naturligt med html. {FONT-STØRRELSE: ... PX} :

 .face {
Border-Top-Left-Radius: 50% 4.5Rem;
Border-top-højre-radius: 50% 4.5Rem;
Border-Bottom-Left-Radius: 50% 3rem;
Border-Bottom-Right-Radius: 50% 3rem;
...
}

Efter at have fuldendt hovedet Border-Radius. , positioner resten af ansigtsegenskaberne som hovedelementer i hovedet, såsom øjne, kinder, næse og ører. Som hovedet, Border-Radius. Trick vil komme til nytte siden Border-radius: 50% Må ikke se tiltalende.

03. Flyt videre til kroppen

Et legeme & lt; div & gt; kan placeres i kroppen beholderen bag hovedet og formet med det samme Border-Radius. Teknik, såvel som arme, ben og hale. For at muliggøre korrekt overlapning skal den faktiske krop være sit eget element, da visse indre elementer som bagstrifter skal skæres af med Overflow: Hidden. . At give kroppen mere dybde, den Transform: Skew () Ejendom kan rengøre kroppen lidt.

Lynbolten kan bygges ved hjælp af tre separate rektangler i stedet for at forsøge at danne denne form fra et element. Rektanglerne kan drejes og placeres over toppen af hinanden for at danne en bolt. Armene og benene kan bruge den mørkere primære farve, vi oprettede ved hjælp af SASS mørkere () så de skiller sig ud.

04. Tilsæt balloner

Nu hvor den elektriske mus er afsluttet, lad os binde balloner til ryggen. Tilføj noget & lt; div & gt; s med fælles stilarter med en barnestreng & lt; div & gt; og placere dem bundtet over hovedet. Strengen er usynlig undtagen a Border-Left. , som hjælper med at få det til at se mere snor-lignende.

At binde strengen omkring tegnets talje, en & lt; div & gt; kan placeres i kroppen for at muliggøre korrekt positionering. Strengen har brug for en lille kurve, der skal vises som om det er bundet rundt om kroppen, så det kan have en lille højde, Border-Bottom. og A. Border-Bottom. Venstre og højre radius, hvilket gør en tynd buet linje:

 .strøm {
Højde: 1rem;
Bredde: 9rem;
Border-right: Solid 1px $ White;
Border-Left: Solid 1px $ White;
Border-Bottom: Solid 1px $ White;
Border-Bottom-Left-Radius: 50% 1rem;
Border-Bottom-Hight-Radius: 50% 1rem;
}

05. Animere CSS

Vi kan give karakteren livet ved at tilføje @Keyframes. animationer. Arme, ben, ører og hale kan animeres med Transform: Drej () . Sikre transformation oprindelse er indstillet til 'joint' (dvs. topcenter for et ben) og juster rotationen. Denne animationstype kan bruges flere gange i en SASS Mixin:

 @Mixin ANIMATIONATATE ($ NAVN, $ START, $ END) {
@Keyframes # {$ navn} {
0%, 100% {Transform: Rotate (# {$ Start} DEG)}
50% {Transform: Rotate (# {$ end} DEG)}
}
}

Endelig tilføjer en langsom 5s Transform: Rundture () Keyframe animation vil animere tegnet op og ned som om det flyder. For et strejf af realisme, en blinkende animation ved hjælp af Transform: SCALY (0,1) Ejendommen kan bruges til at få det til at virke som om øjnene lukker.

Denne artikel blev oprindeligt offentliggjort i Creative Web Design Magazine net . Køb problem 283. eller abonnere .

Læs mere:

5 ting, du aldrig vidste om CSS
Tilføj SVG filtre med CSS
Sådan kaster du Smart Text Effects med CSS

Opret animeret CSS-kunst

01. Start med containere

02. Stil hovedet

03. Flyt videre til kroppen

04. Tilsæt balloner

05. Animere CSS

hvordan - Mest populære artikler

Facebook Privacy Settings: Sådan holder du din profil privat

Sådan kombineres 3D og komisk kunst i Zbrush

Opret glatte UI-animationer

Mal en sci-fi spil indstilling i Photoshop

Generer endeløse farvepaletter med Khroma

Sådan master Creature Anatomy

Sådan perfekt hår i dine portrætter

Oplev stil og stof af typografi

Kategorier