Animare SVG pentru orice site web cu Adobe Illustrator, HTML și CSS

Pentru a anima SVG-ul nostru suntem preocupați de ajustarea următoarelor părți ale SVG-ului în CSS-ul nostru – clasa „.st0” și tag-ul <path></path>.

Copiați și lipiți următorul cod în fișierul dvs. CSS.

Puteți seta culorile de trasare și umplere ale SVG-ului nostru în clasa „.st0” și în tag-ul <path></path>. Le-am setat aici la negru #000. Observați că am început cu o linie albă #FFF și fără culoare de umplere. în Adobe Illustrator. Acest lucru este valabil pentru toate proprietățile SVG-ului, ele pot fi modificate în fișierul nostru .css.

Acesta este rezultatul

.

Puteți personaliza absolut orice animație. Observați că am folosit o animație cubic-bezier mai sus. Aici este un loc bun pentru a personaliza animația https://cubic-bezier.com/

Căutați codul complet al paginii noastre web mai jos

HTML

CSS

Obțineți Adobe Illustrator de aici https://www.adobe.com/products/illustrator.html

Asta e tot prietenii mei, dacă v-a plăcut acest articol vizitați pagina noastră de Facebook și site-ul nostru IRIS WEB CORE.

Și ca întotdeauna să aveți o zi minunată!

Lasă un comentariu