Animálása ikonok, CSS3 sablon

Ebben a cikkben, nézzük meg, hogyan kell animálni ikonok, vagy inkább minden SVG-grafika. SVG-grafika - ez méretezhető vektorgrafikus, amelyeket fel lehet használni közvetlenül a kódlapot. Előnye más típusú grafikonokat, hogy a növekedés a méret a kép - a minőség nem elveszett.

SVG-ikon megtalálható sok helyen, fizetett és ingyenes. Szoktam használni iconfinder.com és flaticon.com

Nos, ez - ikonok kiválasztása és letölthetők a számítógépre. Most a munka kezd ikonok kezdett „életre kelnek”. Az első dolog, hogy menjen github.com és töltse le a két fájlt jquery.lazylinepainter-1.5.1.min.js Raf-polyfil.js. Kötjük össze őket a megszokott módon a záró tegom . Szintén csatlakozni jquery és könyvtár még mindig üres main.js. fájl

Azonban az utóbbi három kombinálható egyetlen.

Továbbra is a HTML-kódot regisztrálni egy sorban:

Ha az oldal használ több animált ikonok, az objektum, amely az útvonalat, hogy az SVG-grafika - pathObj kell tenni változtatni, például pathObj1, pathObj50 (kötelező mindkét sornyi kódot).

Meg lehet változtatni az animáció késleltetheti a az animáció, a színek és méretek sor az egyes site „rajz”. Például, a következő kód mutatja az adatok egy részét változásokat.

Továbbra is látni, hogyan néz ki a valóságban, egy élő példa. és aki hajlandó alkalmazni az életben ajánlat letöltés arhivchik ezt a példát.

Szintén ebben a témában lehet olvasni:

Kapcsolódó cikkek

• Animált ikonok rocketdockzarabotok panel otthon

• Cseréje szabványos ikonok lemezek windows xp

• Animációs ikonok segítségével