Nasza strona używa cookies. Dowiedz się więcej o celu ich używania i zmianie ustawień w przeglądarce. Korzystając ze strony, wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki. Rozumiem

CSS: animowanie grafik SVG

Wojciech Połowniak Full Stack JS Developer, Koduje Owner / https://koduje.pl
O tym, jak animować grafiki wektorowe na stronie www, używając samego CSS-a.

 

Nowoczesne strony internetowe często wykorzystują proste, animowane grafiki w stylu flat design. Jedną ze stron tego typu jest http://ydkjs.functionite.com, przygotowana na warsztaty z Kylem Simpsonem. Jeśli zastanawialiście się, jak tworzy się takie strony - to wideo jest dla Was.

W ramach wstępu posłuchacie czym jest grafika wektorowa i rastrowa oraz czym się różnią. Po chwili zaczniemy animować nasz statyczny plik SVG w przeglądarce - przy użyciu samego CSS-a. Miłego oglądania!

Omawiany kod źródłowy: https://bit.ly/2JoErUA

Podczas tworzenia tego przykładu korzystaliśmy z przeglądarki Google Chrome w wersji 57.0.2987.110 (64-bit). Pamiętajcie, że przykłady widoczne w naszych nagraniach mają charakter demonstracyjny, pokazowy i nie powinniście używać ich w dokładnie tej samej formie na produkcji.

Koduje na YouTube: https://bit.ly/2KHbJzQ

Koduje na Facebooku: https://www.facebook.com/kodujemy/

Zobacz więcej na Bulldogjob

Masz coś do powiedzenia?

Podziel się tym z 80 tysiącami naszych czytelników

Dowiedz się więcej
Rocket dog