Az SVG animációhoz a CSS-ben az SVG következő részeinek beállításával foglalkozunk: a “.st0” osztály és a <path></path> tag.
A következő kódot másoljuk ki és illesszük be a CSS-fájlunkba.
A “.st0” osztályban és a <path></path> tagben állíthatjuk be az SVG-nk vonalkázásának és kitöltésének színeit. Mi itt a #000-es fekete színt állítottuk be. Vegyük észre, hogy az Adobe Illustratorban fehér #FFF vonallal és kitöltőszín nélkül kezdtük. Ez az SVG összes tulajdonságára érvényes, ezeket a .css fájlunkban módosíthatjuk.
Ez az eredmény
Az animációt teljesen testre szabhatod. Vegyük észre, hogy fentebb egy kocka-bezier animációt használtunk. Itt van egy jó hely az animáció testreszabásához https://cubic-bezier.com/
A weboldalunk teljes kódját alább találod
HTML
CSS
Az Adobe Illustrator-t innen https://www.adobe.com/products/illustrator.html
Ez az barátaim, ha tetszett ez a cikk, látogass el Facebook oldalunkra és weboldalunkra IRIS WEB CORE.
És mint mindig, legyen szép napod!