Cum de a crea un logo animat folosind SVG și css, wpnice - site-ul dvs. pe WordPress

Bună ziua tuturor cititorilor. Un mic set de înaltă calitate de animație prezente pe site-ul dvs. ar trebui să declanșeze emoții pozitive în vizitatori, deoarece întregul Internet este lent, se deplasează în HTML5 folosind Partidul pentru animație de web, dar este demn de reținut faptul că utilizarea acestuia poate duce, de asemenea, la unele dificultăți.

SVG (Scalable Vector Graphics) ne oferă o alternativă bună, deoarece vă permite să utilizați un API mare, printre alte beneficii, precum și un program pot fi animate folosind CSS-picătură de creativitate.

In acest articol vom învăța să lucrați cu SVG și se combină acest format cu CSS pentru a crea un logo animat.

De ce grafică vectorială scalabilă atât de cool

După cum puteți vedea, aceste imagini schimba dimensiunea lor, fără pierderi de calitate, poate fi util atunci când construirea unui site web receptiv. Fie că poate dacă grafică vectorială, apoi, atunci când este vorba de imagini complexe, au nevoie, o cantitate disproporționată de date. Datorită acestui fapt, SVG este utilizat pe scară largă numai în logo-uri, infografică sau program regulat.

SVG pot fi ușor animate folosind CSS, dar mai întâi, să învețe cum să lucreze cu SVG, folosind instrumente speciale.

Cum de a lucra cu SVG

După cum sa menționat mai sus, puteți lucra cu SVG și mâinile goale, dar ce se întâmplă dacă există mari instrumente pentru crearea și manipularea SVG-fișiere care vă permit să restricționeze lucrul cu codul pur și simplu prin editarea CSS și animație.

Singurul dezavantaj al utilizării acestor instrumente este faptul că acestea se adaugă o mulțime de metadate cod asociat, care are ca rezultat într-un fișiere foarte grele. Deci, grafică vectorială scalabilă, în cele mai multe cazuri, aveți nevoie pentru a optimiza înainte de a utiliza pe site.

Să luăm exemplul SVG fișier cu Android logo-ul înainte și după optimizare:

Deși fișierul sursă SVG și așa a fost destul de compact pentru a începe (0,5 KB), procesul de optimizare va reduce dimensiunea fișierului cu 12,5% (a fost 0,4 kb). În cazul mai multor imagini complexe, veți observa o reducere mai impresionant în dimensiunea cordonului ombilical și de a crește viteza de site-ul de încărcare, în prezența acolo SVG-elemente.

Acum, să vedem cum putem folosi CSS pentru a anima grafice create folosind acest limbaj de marcare.

Crearea unui logo animat folosind SVG și CSS

SVG este sintaxa nativă numai pentru animație, numit SMIL, și vă permite să anima grafica atributele direct folosind XML-marcare.

Dar este de remarcat faptul că Internet Explorer nu a oferit sprijin pentru un SMIL, iar dezvoltatorii Chrome spun refuzul de a sprijini această sintaxă în favoarea CSS și animație web.

Să ne uităm la câteva exemple. Amintiți-vă SVG Adobe-logo-ul, pe care am introdus mai devreme? Vom folosi un simplu intermitente de animație și efecte de tranziție pentru a schimba culoarea. Vom începe cu o notație a clasei buclă vector, și apoi se adaugă efectele în această clasă la dosarul nostru stil. Iată cum va arăta ca HTML: