Как да създадете анимирани лого с помощта на SVG и CSS, wpnice - вашия сайт на WordPress
Добър ден на всички читатели. Една малка група от висококачествена анимация присъства на вашия сайт би трябвало да предизвика положителни емоции в посетителите си, тъй като целият Интернет се движат бавно към HTML5 използване на Партията за уеб анимация, но си струва да припомним, че употребата му може да доведе до някои трудности.
SVG (Scalable Vector Graphics) ни дава една добра алтернатива, тъй като тя позволява да се използват голям API, наред с други предимства, както и график могат да бъдат анимирани с помощта на CSS-капка творчество.
В тази статия ще ви научи да работи с SVG и комбинирайте този формат с CSS, за да създадете анимирани лого.
Защо мащабируеми векторни графики толкова готин
Както можете да видите, тези изображения се променят размера си без загуба на качество, може да бъде полезен при изграждането на адаптивен уебсайт. Във всеки случай, тя може, ако е векторна графика, а след това, когато става въпрос за сложни образи, те изискват непропорционално голямо количество от данни. Поради този факт, SVG е широко използвана само в лога, информационни графики или редовен график.
SVG могат лесно да бъдат анимирани с помощта на CSS, но нека първо се научат как да работят с SVG, с помощта на специални инструменти.
Как да работим с SVG
Както бе споменато по-горе, можете да работите с SVG и голи ръце, но какво ще стане ако има страхотни инструменти за създаване и управление на SVG файлове, които ви позволяват да се ограничи работата с кода като просто редактиране на CSS и анимацията.
Единственият недостатък на използването на тези инструменти е, че те добавят много свързан код метаданни, което води до много тежки файлове. Така мащабируеми векторни графики в повечето случаи трябва да се оптимизира преди да го използвате на вашия сайт.
Да вземем за пример SVG-файл с Android-логото преди и след оптимизация:
Въпреки, че източник SVG файл, и така е доста компактен, за да започнете (0.5 kb), процеса на оптимизация ще доведе до намаляване на размера на файла с 12.5% (беше 0.4kB). В случай на по-сложни изображения, ще забележите по-впечатляващо намаляване на размера на пъпната връв и да се увеличи скоростта на зареждане на сайта в присъствието там SVG-елементи.
Сега нека видим как можем да използваме CSS за анимиране на графики, създадени с помощта този език за маркиране.
Създаване на анимирани лого използвайки SVG и CSS
SVG е роден синтаксис само за анимация, наречена SMIL, и ви позволява да анимирате вашата графична атрибути директно с помощта на XML-маркиране.
Но си струва да се отбележи, че Internet Explorer никога не е предоставил подкрепа за SMIL и разработчиците Chrome казват отказа да подкрепи този синтаксис в полза на CSS и уеб анимация.
Нека да разгледаме някои примери. Не забравяйте, SVG Adobe-лого, което ние въведохме по-рано? Ние ще използваме просто мигащи анимация и ефекти за преход, за да промените цвета си. Започваме с нотация на линия клас вектор, след което добавете ефектите от този клас в нашия стил файл. Ето как ще изглежда HTML: