Animation de SVG pour tout site web avec Adobe Illustrator, HTML et CSS

Pour animer notre SVG, nous sommes concernés par l’ajustement des parties suivantes du SVG dans notre CSS – la classe « .st0 » et la balise <path></path>.

Copiez et collez le code suivant dans votre fichier CSS.

Nous pouvons configurer les couleurs du trait et du remplissage de notre SVG dans la classe « .st0 » et la balise <path></path>. Nous les avons configurées ici en noir #000. Remarquez que nous avons commencé avec un trait blanc #FFF et aucune couleur de remplissage. dans Adobe Illustrator. Ceci est valable pour toutes les propriétés du SVG, elles peuvent être modifiées dans notre fichier .css.

Voici le résultat

.

Vous pouvez absolument personnaliser l’animation. Remarquez que nous avons utilisé une animation cubique-bezier ci-dessus. Voici un bon endroit pour personnaliser votre animation https://cubic-bezier.com/

Trouver le code complet de notre page web ci-dessous

HTML

CSS

Gagner Adobe Illustrator d’ici https://www.adobe.com/products/illustrator.html

C’est tout mes amis, si vous avez aimé cet article visitez notre page Facebook et notre site web IRIS WEB CORE.

Et comme toujours, passez une bonne journée !

.

Laisser un commentaire