Voidaksemme animoida SVG:tämme CSS:ssä seuraavat SVG:n osat: ”.st0”-luokka ja <polku></polku>-tagi.
Kopioi ja liitä seuraava koodi CSS-tiedostoosi.
Voimme säätää SVG:n viivoituksen ja täytteen värit ”.st0”-luokassa ja <path></path>-tagissa. Olemme asettaneet ne tässä mustaksi #000. Huomaa, että aloitimme Adobe Illustratorissa valkoisella #FFF-viivalla ja ilman täyttöväriä. Tämä pätee kaikkiin SVG:n ominaisuuksiin, niitä voidaan muuttaa .css-tiedostossamme.
Tämä on tulos
Voit ehdottomasti muokata animaatiota. Huomaa, että olemme käyttäneet edellä kuutio-bezier-animaatiota. Tässä on hyvä paikka muokata animaatiota https://cubic-bezier.com/
Löydät verkkosivumme koko koodin alta
HTML
CSS
Hanki Adobe Illustrator täältä https://www.adobe.com/products/illustrator.html
Tässä kaikki ystäväni, jos pidit tästä artikkelista, vieraile Facebook-sivuillamme ja verkkosivuillamme IRIS VERKKOYDIN.
Ja niin kuin aina, hyvää päivänjatkoa!
Hyvästi!