Hogyan lehet hozzáadni animációt az SVG-hez CSS-vel

Sep 17, 2025
kézikönyv
Image: Web Designer
[Image: Web Designer]

Amikor az SVG-ekkel való animálásra kerül sor, az egyik legfontosabb kikapcsolás lehet az ötlet, hogy a JavaScript-könyvtárakban leállt. Ez azonban nem kell így lennie. A CSS képes kezelni az egyes útvonalak kiválasztását egy SVG-ben a hatások létrehozásához. Csak tudva, hogy az alapok azt jelenthetik, hogy lehetséges, hogy lapos, cliched ikonok valami kicsit lenyűgözőbbek. Tehát talán itt az ideje, hogy az SVG optimalizálás és animáció alapvető lépésein keresztül futjon. A különböző tervekbe való beépítésnél nem tart sokáig, hogy felismerje, hogy a lehetőségek végtelenek.

További mozgás inspirációért nézze meg a Creative Bloq útmutatót CSS animációs példák és hogyan kell kódolni őket.

Mentse meg a 100 fontot egy szuper korai madárjegyhez CSS létrehozása , a Creative Bloq, a Web Designer magazin és a Net magazin által szervezett egynapos webkonferencia. Foglaljon itt .

01. Hozzon létre és mentse

Először hozzon létre egy SVG-t, hogy dolgozzon. Ehhez a bemutatóhoz egy egyszerű grafikát használunk illusztrátorban. Az Illustrator használatakor az SVG exportálásához csökkentse a grafika megfelelő méretét, majd kattintson a "Mentés" gombra. Válassza az SVG lehetőséget a "Mentés típus" legördülő menüből, majd az "SVG kód ..." az SVG opciók párbeszédéről.

02. Optimalizálja az interneten

SVG screenshot

Kattintson az ikonra a jobb felső sarokban a kép nagyításához [Kép: svgomg]

A felesleges címkék kivágása könnyebbé teszi a képet. Ezt manuálisan végezheti úgy, hogy a kódot a kedvenc szerkesztőre és az üres címkék és metaadatok eltávolításával lehet másolni. Alternatív megoldásként egy fantasztikus erőforrás hívott Svgomg automatikusan megteszi ezt. Illessze be a kódot az SVGOMG interfész "Paste Markup" területére, majd ismét másolja a képet a jobb alsó sarokban.

03. HTML dokumentum létrehozása

Nyissa meg a kód szerkesztőjét, és hozzon létre egy üres HTML dokumentumot. Meg fogjuk írni a CSS animációt egy hívott fájlban main.css , így hozzon létre ezt is. Annak érdekében, hogy az animációra összpontosuljon, a Bootstrap 4.1.3-as CSS-kizárólagos verziójába húzódunk.

04. Építsd meg az elrendezést

Építsük meg az elrendezésünk csontjait, és helyezzünk egy helyet az SVG-nek. Hozzáadtunk egy fejlécet és két oszlopot: az egyik a bal oldalon néhány szövegre, és az egyik a jobb oldalon, amely megtartja az SVG-t, amit animálunk. Ahhoz, hogy megélhesse az oldalt felfelé, használjon egy második, statikus, svg háttérként a testcímkén.

05. Helyezze az SVG-t

Az animációnkat használjuk, hogy az oldal tetején érdekesebb legyen. Illessze be az optimalizált SVG kódot az oldal második oszlopába. Ha a bootstrap használata, adja meg az SVG osztályt img-fluid hogy megbizonyosodjon arról, hogy a mobilok mérlegelése.

06. Osztályokat adjon hozzá az SVG-hez

Osztályok hozzáadása az SVG-hez lehetővé teszi a CSS-t, hogy kiválassza az egyéni formákat a képen belül. Ez azt jelenti, hogy a kép különböző formáit különböző időpontokban animálhat, összetettebb hatást gyakorolhat. 

 & lt; svg & gt;
& lt; g & gt;
& lt; rect class = "rectbackground" width = "147.4107"
magasság = "68.7917" x = "31,2946" y = "114.1042"
rx = "4.5882" ry = "3.9565" kitöltés = "# 2a7fff" / & gt;
& lt; path osztály = "recttext" d = "..." vektor-hatás = "nem skálázott stroke" stroke-width = ". 470476156" Font-size = "12" kitöltés = "# fff"
Töltési szabály = "egyenletes" stroke = "# fff" stroke-linecap = "kerek" / & gt;
& lt; / g & gt;
& lt; / svg & gt;

07. A kezdeti állapotok

A CSS-ben lévő SVG elemek kiválasztása ugyanaz, mint bármely más elem. Osztályunkat használjuk, hogy kiválaszthassuk ezeket az elemeket az SVG-ben. Az SVG mindkét része elkezdődik, amikor az oldalterhelés, így használjuk a CSS-t, hogy mindkét elem opacitását állítsuk be 0 . 

 Path.RectText {
Opacity: 0;
}
rect.rectbackground {
Opacity: 0;
}

08. Állítsa be az animációkat

Minden egyes animáció nevét és kulcskeretet kell kijelentnünk, hogy a CSS tudja, mit akarunk tenni, ha megkérjük, hogy végrehajtsuk a hatást. Kiválasztottam textraw és rectfade , amikor leírják az egyes animációt. rectfade Egyszerű kétlépcsős animáció lesz. textraw extra középső lépés lesz. 

 @keyFRAMES TEXDRAW {
0% {}
50% {}
100% {}
}
@keyFames Reccefade {
tól től{}
nak nek{}
}

09. Animáció és tulajdonságok hozzárendelése

SVG and coding

Kattintson az ikonra a jobb felső sarokban a kép nagyításához [Kép: Joseph Ford]

Hozzáadjuk a rectfade Animáció a rectbackground elem, és adja meg egy másodperc időtartamát. Egy öröklődés A COBIC BEZIER-t arra használják, hogy simább érezze magát. Hozzáadunk előrehalad Tehát az elem megtartja az utolsó kulcskeret tulajdonságait, amikor az animáció véget ér. 

 rect.rectbackground {
Opacity: 0;
Animáció: RectFade 1s Cubic-Bezier (0,645,
0,045, 0,355, 1) előre;
}

10. A téglalap animáció

SVG image

Kattintson az ikonra a jobb felső sarokban a kép nagyításához [Kép: Joseph Ford]

Csak két kulcskerettel, mindössze annyit kell tennie, hogy a téglalapunkat meg kell tennünk az attribútumok kezdete és befejezése. Kezdjük a 1% Szélesség és befejezés 100% hogy "a megfelelő hatásra kiterjesszék". Azt is beállíthatjuk Opacity: 1 az utolsó kulcskerethez, így az alak egyidejűleg elhalványul. 

 @KeyFames Reccefade {
tól től {
Szélesség: 1%;
}
nak nek {
Szélesség: 100%;
Opacity: 1;
}
}

11. A szöveg animáció

A szövegünkön lévő vonalhúzáshatást fogunk létrehozni, majd használjon egy kitöltést, hogy elhalványuljon. A szöveg animációjának beállításához adjuk meg textraw négy másodperces időtartammal. A Cubic Bezier ezt a lépést módosította, hogy enyhén eltérő mozgást adjon. 

 Path.RectText {
Opacity: 0;
Animáció: TEXTDRAW 4S
Cubic-Bezier (0,56, -0,04, 0,32, 0,7) előre;
}

12. Késlelteted a kezdetet

A szöveget kell futtatni, ahogy a téglalap befejezte gyengülését. Mivel a téglalap egy másodperc időtartamú, késleltetheti a szövegben animáció addigra. 

 Path.RectText {
Opacity: 0;
Animáció: TEXTDRAW 4S
Cubic-Bezier (0,56, -0,04, 0,32, 0,7) előre;
Animáció késleltetés: 1s;
}

13. emulálási vonal rajz

SVG animation

Kattintson az ikonra a jobb felső sarokban a kép nagyításához [Kép: Joseph Ford]

A vonalhúzási hatásunkhoz a stroke-dasharray és stroke-dashoffset paraméterek. Az értékek eltérőek lesznek az enyémtől függően az SVG-től. Az érték megtalálásához használja az előnyben részesített fejlesztői eszközöket és növelje stroke-dasharray tól től 0 addig, amíg az egész alakot egy stroke fedezi. 

 Path.RectText {
Opacity: 0;
Stroke-Dasharray: 735;
Animáció: TEXTDRAW 4S
Cubic-Bezier (0,56, -0,04, 0,32, 0,7) előre;
Animáció késleltetés: 1s;
}

14. Első sor rajz Keyframe

Most már egy nagyon nagy löketünk van, amely lefedi az egész szövegút, ellensúlyozza a saját hosszával, hogy hatékonyan elhúzza. Használ stroke-dashoffset ugyanolyan értékű, mint a miénk dasharray meg kell tennie. Állítsa be ezt az első kulcskeretünkbe. Az alakot is átlátszóvá teszik, és beállítjuk a stroke-t fehérre, ha még nem. 

 0% {
Töltse ki: RGB (255, 255, 255, 0);
Stroke: #FFF;
stroke-dashoffset: 800;
Opacity: 1;
}

15. Rajzolja meg a vonalakat

A középső kulcskeretünk megjelenik 40% az animáción keresztül. Hozzuk a stroke-dashoffset Vissza a nullára, hogy a kötőjel lefedje az egész útvonalat. Ezen szakaszban újra hozzáadhatjuk az átlátszó kitöltést, hogy megbizonyosodjon arról, hogy a rajz csak akkor jelenik meg, ha a rajz befejeződött. 

 40% {
stroke-dashoffset: 0;
Töltse fel: RGB (255, 255, 255, 0,0);
}

16. Töltse ki az alakot

Az animáció utolsó részében fehér alakot töltünk be. Mindössze annyit kell tennie, hogy az utolsó kulcskeret emelje fel a kitöltési szín alfa értékét. Ez létrehozza a töltés elhalványulását. 

 100% {
Töltse ki: RGB (255, 255, 255, 1);
stroke-dashoffset: 0;
Opacity: 1;
}

generate conference

Ezt a cikket eredetileg a Creative Web Design magazinban tették közzé Web designer . Megvásárolható probléma 286 vagy Iratkozz fel .

Olvass tovább:

  • Adjunk hozzá svg szűrőket CSS-vel
  • Hogyan tervezzük a CSS formákkal: Bevezetés
  • A Smart szöveg hatásainak kódja a CSS-vel

kézikönyv - Most Popular Articles

Hogyan flip egy réteget a Photoshopban: Teljes útmutató

kézikönyv Sep 17, 2025

Két kettős? Ezt a képet az eredetihez fordították és keverték (Kép hitel: jövő) Ez a bemutató ..

Hogyan készítsünk egy képernyőképet Mac-en

kézikönyv Sep 17, 2025

(Kép hitel: kreatív bloq) Ha egy teljes képernyőt, ablakot, vagy csak egy kiválasztott részét szeretne rögzí..

Fedezze fel az adatok megjelenítését p5.js-vel

kézikönyv Sep 17, 2025

(Kép hitel: Net Magazine) A P5.js a híres asztali kreatív kódolási környezeti feldolgozás legutóbbi JavaScrip..

Hogyan lehet létrehozni egy szuper-realisztikus fantasy teremtményt

kézikönyv Sep 17, 2025

Festés egy fantasy teremtmény lehet sok móka. Véleményem szerint küzdesz, hogy megtalálja a témát, amely nagyobb szabads..

A chart.js felhasználása az adatok interaktív diagramokká történő bekapcsolásához

kézikönyv Sep 17, 2025

Page 1 of 2: A chart.js használatával: 01-10 lépések A chart.js haszn..

Szimulálja a Ghost Rider transzformációt

kézikönyv Sep 17, 2025

Page 1 of 2: 1 oldal 1 oldal 2. oldal ..

Animált GIF-t készít a Photoshop-ban

kézikönyv Sep 17, 2025

Az Adobe új sorozatú videó oktatóanyagokat indít, amelyeket ma úgy hívnak, amelynek célja, hogy vázolja fel a különböző tervezési projektek létrehozását Kreatív felh..

Hogyan készítsünk rugalmas szalagot

kézikönyv Sep 17, 2025

A szalagforgók meglehetősen gyakoriak 3D Art termelési fúrók ezekben a napokban. Hasonló viselkedésük van ..

Kategóriák