Animarea icoane, șablon CSS3

În acest articol, să ne ia în considerare modul de a anima pictogramele, sau mai degrabă orice SVG-grafică. SVG-grafică - care este o grafică vectorială scalabilă, care pot fi utilizate direct în pagina de cod. Avantaj față de alte tipuri de grafice, în care, cu o creștere a dimensiunii imaginii - nici o calitate se pierde.

SVG-icoane pot fi găsite pe multe site-uri, atât plătite și gratuite. Eu folosesc de obicei iconfinder.com și flaticon.com

Ei bine, asta - icoanele sunt selectate și descărcate pe un computer. Acum lucrarea începe să icoane a început să „prindă viață“. Primul lucru pentru a merge github.com și descărca cele două fișiere jquery.lazylinepainter-1.5.1.min.js și Raf-polyfil.js. Noi le conecta ca de obicei, înainte de închidere tegom . De asemenea, conectați jQuery și biblioteca sa este încă fișier main.js. gol

Cu toate acestea, ultimele trei pot fi combinate într-o singură.

Rămâne în codul HTML pentru a înregistra o singură linie:

Dacă pagina utilizează mai multe pictograme animate, obiectul care specifică calea către SVG-grafica - pathObj trebuie să fie făcute pentru a schimba, de exemplu pathObj1, pathObj50 (obligatoriu în ambele linii de cod).

Puteți schimba animația întârzia începerea animației, culorile și dimensiunile de linii pentru fiecare sit „desen“. De exemplu, următorul cod prezintă o parte a modificărilor de date.

Rămâne să vedem cum arată în realitate, un exemplu viu. și care sunt dispuși să-l aplice în oferta de viață de download arhivchik cu acest exemplu.

De asemenea, pe acest subiect puteți citi:

articole similare

• pictograme animate pentru panoul rocketdockzarabotok la domiciliu

• Înlocuirea icoane discuri standard, în Windows XP

• icoane de animație utilizând