Crea arte CSS animata

Feb 2, 2026
Come si fa
CSS art
(Immagine di credito: SCKONG TIFFANY)

La creazione di immagini CSS è un modo divertente per praticare le tue abilità e creare un perfetto pezzo di grafica. È una bella pausa dal solito stile giorno per giorno di componenti web. Tutto quello che devi iniziare è un documento vuoto e un file CSS; Si consiglia di utilizzare Sass, che ti consentirà di riutilizzare gli stili e scrivere selettori più semplici (vedere la nostra guida a Cos'è il sass? Per saperne di più su questo preprocessore).

Inizieremo con alcuni suggerimenti principali per il mastering dell'arte CSS, poi ti mostreremo come ricreare questo palloncino animato Pikachu utilizzando solo CSS (assicurati di mantenere i tuoi file sicuri in modo decente deposito cloud. ).

Per ulteriori ispirazione, esplora la nostra rounture di incredibile Esempi di animazione CSS. . Dopo qualcosa di più semplice? Inizia attenuando Come creare un ghiacciolo usando CSS .

O, se stai iniziando un nuovo sito, abbandona la complessità con un brillante Builder del sito web E assicurati di ottenere il tuo web hosting spot on.

Ridurre il design a forme semplici

Durante la creazione di CSS Art, può aiutare a guardare alcune immagini di riferimento per l'ispirazione e quindi creare una variazione dei cartoni animati semplificata mentre si va avanti, immaginando il soggetto usando forme primitive, che fanno meglio Forme CSS. .

Utilizzare uno sfondo luminoso per aiutare con il posizionamento

Quando si sovrappongono forme di colori simili, è difficile da vedere dove vengono posizionati o come sembrano. È utile avere la forma in cui stai lavorando si distinguendo cambiando il colore di sfondo a qualcosa di luminoso e allegro, come Magenta. Ciò consente di vedere facilmente la posizione e la forma esatta del tuo elemento.

Utilizzare dimensioni fluidi

Quando si tratta di definire un valore PX per le proprietà, si consiglia di utilizzare l'unità REM. Nel caso in cui tu decidi di volere che il tuo pezzo generale sia più grande o più piccolo, utilizzando le unità REM devi solo cambiare la base HTML {Font-Dimensione: ... px} nel tuo sass per ridimensionare l'intera opera d'arte su o giù.

Quando si definisce le altezze e le larghezze degli elementi figlio che dovrebbero avere il dimensionamento relativo al genitore, le percentuali sono utili. Poiché questi valori sono sempre relativi ai loro genitori, dovrebbero anche ridimensionare con il HTML Font-Dimensione .

Generate CSS

Genera CSS è una conferenza su misura portata da Creative Bloq, Net e Web Designer. Clicca per prenotare il tuo biglietto iniziale! (Immagine di credito: Getty / Future)

01. Inizia con i contenitori

Un contenitore del wrapper per tenere i pezzi dell'opera d'arte è un buon posto per iniziare. All'interno del contenitore, possiamo posizionare tre contenitori interni - la testa, il corpo e i palloncini. 

 & lt; div class = "contenitore" e GT;
& lt; div class = "head" & gt; & lt; / div & gt;
& lt; div class = "body" & gt; & lt; / div & gt;
& lt; div class = "palloncini" e gt; & lt; / div & gt;
& lt; / div & gt;

Il contenitore dovrebbe solitamente essere Posizione: relativo Per consentire che altri elementi siano posizionati relativamente al suo interno usando Posizione: Assoluto. E avere un'altezza e una larghezza ben definita, altrimenti il ​​posizionamento elementi figlio diventano difficili.

Nei tuoi stili, aggiungi i tuoi colori base come variabili Sass per la riusabilità. Il sass alleggerire() e scurire() Le funzioni creeranno tinte e sfumature dei tuoi colori, che possono essere utilizzate come punti salienti o ombre per il tuo personaggio.

02. Stile la testa

Con la struttura figurata, facciamo prima la testa. In questo caso, la testa effettua un bel punto centrale per l'opera d'arte, quindi piuttosto che mettere la sua posizione in assoluto, può essere impostato in parente. Ciò consente al contenitore di avere un elemento stabile al suo interno, dando agli altri elementi assoluti flottanti un punto di ancoraggio e quindi più controllo sulla loro posizione.

Le funzioni del viso avranno bisogno di un contenitore per il posizionamento, quindi creare a & lt; div & gt; Dentro il contenitore della testa per la forma gialla con una larghezza, altezza e colore di colore - ora facciamo un aspetto di rettangolo più simile a una forma della testa. Una delle proprietà più comuni e utili nell'arte CSS è il Border-Radius. Proprietà, che cambia la curva della X o Y degli angoli di una scatola e può essere utilizzato per creare forme più organiche.

Usando questa tecnica con un rem e una combinazione percentuale, puoi fare forme simili a Blob piuttosto che semplici ellissi, che scalano naturalmente con il html. {Font-Dimensione: ... px} : 

 .Face {
Border-top-sinistra-radius: 50% 4.5rem;
Border-Top-Reight-Radius: 50% 4.5Rem;
Border-bottom-sinistra-radius: 50% 3Rem;
Border-bottom-retta-radius: 50% 3Rem;
...
}

Dopo perfezione della testa Border-Radius. , Posizionare il resto delle caratteristiche del viso come elementi figlio della testa, come gli occhi, le guance, il naso e le orecchie. Come la testa, il Border-Radius. il trucco tornerà utile da allora Border-Radius: 50% potrebbe non sembrare attraente.

03. Passare al corpo

Un corpo & lt; div & gt; può essere posizionato all'interno del contenitore del corpo dietro la testa e modellato con lo stesso Border-Radius. tecnica, così come le braccia, le gambe e la coda. Per consentire una corretta sovrapposizione, il corpo effettivo dovrebbe essere il proprio elemento, poiché alcuni elementi interni come le strisce posteriori devono essere tagliate con Overflow: nascosto . Per dare al corpo più profondità, il Trasforma: SKEW () La proprietà può pura il corpo leggermente.

La coda del fulmine può essere costruita utilizzando tre rettangoli separati piuttosto che cercare di formare questa forma da un elemento. I rettangoli possono essere ruotati e posizionati sopra l'uno dell'altro per formare un bullone. Le braccia e le gambe possono utilizzare il colore primario più scuro che abbiamo creato usando Sass scurire() Quindi si distinguono.

04. Aggiungi palloncini

Ora che il mouse elettrico è completato, leghiamo i palloni alla schiena. Aggiungi un po & lt; div & gt; S con stili condivisi con una stringa figlio & lt; div & gt; e posizionarli raggruppati sopra la testa. La stringa è invisibile tranne a bordo a sinistra , quale aiuto per far sembrare più stringa.

Per legare la corda attorno alla vita del personaggio, a & lt; div & gt; può essere posizionato all'interno del corpo per consentire il posizionamento corretto. La stringa ha bisogno di una leggera curva per apparire come se fosse legata attorno al corpo, quindi può avere una piccola altezza, front-bottom e A. front-bottom Raggio sinistro e destro, che fa una linea curva sottile: 

 .String {
Altezza: 1Rem;
Larghezza: 9rem;
Border-destra: solido 1 px $ bianco;
Border-Left: Solid 1px $ bianco;
Border-bottom: solido 1 px $ bianco;
Border-bottom-sinistra-radius: 50% 1rem;
Border-bottom-destra-radius: 50% 1Rem;
}

05. Animazione del CSS

Possiamo dare la vita del personaggio aggiungendo @key frames. animazioni. Le braccia, le gambe, le orecchie e la coda possono essere animate con Trasforma: ruota () . Garantire il trasformazione-origine è impostato su "Giunto" (I.e. Top Center per una gamba) e regolare la rotazione. Questo tipo di animazione può essere utilizzato più volte in un mixina sass: 

 @Mixin Animaterotate ($ NOME, $ Start, $ End) {
@key fotogrammi # {$ NAME} {
0%, 100% {Transform: Rotate (# {$ Start} DEG)}
50% {trasformazione: ruota (# {$ End} deg)}
}
}

Infine, aggiungendo un lento 5s Trasforma: Traduttore () L'animazione del fotogramma chiave animerà il personaggio su e giù come se fluttuasse. Per un tocco di realismo, un'animazione lampeggiante usando Trasforma: scalata (0.1) La proprietà può essere utilizzata per farlo apparire come se gli occhi si chiudono.

Questo articolo è stato originariamente pubblicato su Creative Web Design Magazine netto . Comprare il problema 283. o sottoscrivi .

Per saperne di più:

  • 5 cose che non hai mai saputo di CSS
  • Aggiungi filtri SVG con CSS
  • Come codificare gli effetti di testo intelligenti con CSS

Come si fa - Articoli più popolari

Inizia con Adobe Dimension CC

Come si fa Feb 2, 2026

La dimensione Adobe rende un gioco da ragazzi per impostare scene complesse (Immagine del credito: Mike Griggs) ..

Come modellare l'arte del concetto in Cinema 4D

Come si fa Feb 2, 2026

Alcuni anni fa, l'Art Director di Lucid Games mi ha chiesto di aiutarli a progettare 10 veicoli indipendenti per un gioco di comb..

Crea quantità specifiche stili e layouts

Come si fa Feb 2, 2026

In questo tutorial daremo un'occhiata ai modi di cambiare gli stili di elementi di CSS, oltre a styling apparentemente i loro gen..

Come creare una scena della stanza fotorealistica

Come si fa Feb 2, 2026

Vuoi sapere come creare un realistico fly-through-through architettonico ma non sono sicuro di focalizzare i tuoi sforzi all'inte..

4 semplici passaggi per migliorare il tuo rendering

Come si fa Feb 2, 2026

L'uso di luci a cupola è stato uno dei maggiori progressi della creazione CGI negli ultimi decenni. Bagnare una scena da ogni di..

Crea uno sfondo basso poli in c4d

Come si fa Feb 2, 2026

Pagina 1 di 2: Crea uno sfondo basso poli in c4d: passi 01-06 Crea uno sf..

Crea copie digitali di qualità della tua arte

Come si fa Feb 2, 2026

L'arte non riguarda solo la creazione, riguarda anche la condivisione. Una volta che hai fatto un bel lavoro, sei orgoglioso, è solo naturale che vorrete che gli altri ne vedano anche. Ci so..

Fai un prototipo Hi-Fidelity in Atomic

Come si fa Feb 2, 2026

È facile essere coinvolti nel cercare di sviluppare un'idea all'interno di un mockup statico o strumento di disegno file piatto,..

Categorie