SVG-Animation für jede Website mit Adobe Illustrator, HTML und CSS

Um unser SVG zu animieren, müssen wir die folgenden Teile des SVG in unserem CSS anpassen – die Klasse „.st0“ und den <path></path> Tag.

Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre CSS-Datei ein.

In der Klasse „.st0“ und dem <path></path>-Tag können wir die Farben für den Strich und die Füllung unseres SVG einstellen. Wir haben sie hier auf schwarz #000 eingestellt. Beachten Sie, dass wir mit einer weißen Kontur #FFF und keiner Füllfarbe begonnen haben. in Adobe Illustrator. Dies gilt für alle Eigenschaften des SVG, sie können in unserer .css-Datei geändert werden.

Das ist das Ergebnis

Sie können die Animation durchaus individuell gestalten. Beachten Sie, dass wir oben eine kubische Bezier-Animation verwendet haben. Hier ist ein guter Ort, um Ihre Animation anzupassen https://cubic-bezier.com/

Finden Sie den vollständigen Code für unsere Webseite unten

HTML

CSS

Holen Sie sich Adobe Illustrator von hier https://www.adobe.com/products/illustrator.html

Das war’s meine Freunde, wenn Ihnen dieser Artikel gefallen hat, besuchen Sie unsere Facebook-Seite und unsere Website IRIS WEB CORE.

Und wie immer einen schönen Tag!

Schreibe einen Kommentar