For at animere vores SVG skal vi justere følgende dele af SVG’en i vores CSS – “.st0”-klassen og <path></path>-tagget.
Kopier og indsæt følgende kode i din CSS-fil.
Vi kan indstille farverne på stregen og fyldet i vores SVG i “.st0”-klassen og <path></path>-tagget. Vi har her indstillet dem til sort #000. Bemærk, at vi startede med en hvid streg #FFF og ingen fyldfarve. i Adobe Illustrator. Dette gælder for alle egenskaberne i SVG’en, de kan ændres i vores .css-fil.
Dette er resultatet


Du kan absolut tilpasse animationen. Bemærk, at vi har brugt en cubic-bezier-animation ovenfor. Her er et godt sted at tilpasse din animation https://cubic-bezier.com/
Find den fulde kode til vores webside nedenfor
HTML
CSS
Hent Adobe Illustrator herfra https://www.adobe.com/products/illustrator.html
Det var det mine venner, hvis I kunne lide denne artikel besøg vores Facebook side og vores hjemmeside IRIS WEB CORE.
Og som altid god dag!