22: SVG animeerimine CSS-iga - CSS-trikid

Kui kasutate tekstisisest SVG-d, on kogu see SVG-kood otse HTML-is ja seega ka DOM-is. Saate neid kujundada täpselt nii nagu teeksite ,

või mõni muu HTML-element. CSS-i stiil annab animatsioonide ja üleminekute võimaluse.
Lihtne näide:

Vaadake Chris Coyieri (@chriscoyier) poolt CodePenil Pen CodePen'i logo SVNAna.

Selles õpetuses kirjutas A üles, kuidas veidi keerukama kujundusega hakkama saada. Siin on see demo.

Vaadake Chris Coyieri (@chriscoyier) Pen Wufoo SVG reklaami CodePenis.

Selles ekraanikuva koostame Wufoo jaoks veel ühe animeeritud SVG-reklaami, alustades peaaegu nullist. Kujunduses on mõned pilved, mida me animeerime, et saaksime liikuda ja korrata sujuvalt ja lõputult.

Alguses kasutasime tekstisisest SVG-d ja animeerisime selle lihtsalt HTML-i dokumendi külge kinnitatud CSS-iga. Kuid siis, lihtsalt selle töö tutvustamiseks, kolisime selle CSS-i SVG-sse, mis on täiesti kehtiv. Põhjus, miks võiksite seda teha, on see, et siis saab animatsiooni käivitada ka siis, kui kasutate SVG-d kui või `background-image`.

Demo:

Vaadake Code Cenilt Chris Coyieri (@chriscoyier) sulest Pen kKdDj.

Animeerimise brauseri tugi varieerub. Selle kirjutamise ajal töötas see ainult Chrome'is.