SVG-animation til ethvert websted med Adobe Illustrator, HTML og CSS

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!