Hogyan készítsünk egy animációt lebegő zászló

Hozzon létre egy hullámzó zászlót a CSS-en

Teremt Hullámzó zászló a CSS-en

Ma van az állami jelentőségünk, uraim! Megtiszteltetés volt, hogy létrehozzuk animációt & #; Zászló a CSS-en. Igen, nem minden zászló szükséges a kezünk megteremtéséhez, nevezetesen a tricolor! Kétszínű zászló, az úton, mi is megtanuljuk, hogyan lehet a tricolor. A zászló animációjának létrehozásának alapja az előző cikkben leírt elv “A hullámok hatása a CSS-re”. Tehát az ujjakat magasabbra tekerjük, és folytassuk, hogy egy zászlót hozzunk létre a CSS-en! Azt javaslom, hogy az orosz zászló létrehozásával kezdjem. Az alábbiakban leírt módszer szerint más tricolorok beszerzése csak a szükséges lobogó színei helyettesíthető. Milyen helyeken lesz szükség a változások elvégzéséhez, jelezem a cikk szövegét. Kezdjük, megfogalmazzuk a feladatot:

Cél: Hozzon létre egy animációt a lebegő orosz zászló a példában a kép a cikk elején a cikk.

Eszközök: HTML, CSS és testesség szellem

A zászló animációjának létrehozásának elve

Az alapelv a lobogó színeiben festett kerekített blokkok forgása. Mivel a blokkok nem kevesebb, mint 2-szer nőttek a háttérkör tekintetében, és a túlcsordulási tulajdonságot a háttérkörrel meg fogjuk állítani, a felhasználó csak az animáció részét fogja látni. A látott fragment animáció megteremti a fluttering zászló illúzióját.

Folytassa a kód létrehozását

1. Kezdje el, nyissa meg a HTML fájlt, és adjon hozzá egy háttérblokkot a “Flag” azonosítóval. Azt tervezem, hogy ezt a blokkot fehér színre festem, hogy egy fehér zászlós csíkot képezzen ki a tetejéről. A háttérblokk belsejében van blokkok a “Wave2” és a “Wave3” osztályokkal a kék és piros csíkok számára:

Div id = flag div osztály = hullám2 / div div osztály = hullám3 / div / div

2. Ezután adj hozzá stílusokat az újonnan létrehozott blokkokhoz a CSS fájlban. A háttérblokkhoz fehér alapot definiálunk, beállítottuk a méreteket, a francia bekezdéseket, a kerekítést. Ezenkívül adja hozzá a túlcsordulási tulajdonságot: rejtett, amely a blokkon kívüli egyéb elemek részeit adja meg:

#Flag {pozíció: rokon; Szélesség: px; Magasság: px; Border-sugara: px; Határ: 10px szilárd # E6E6E6; Háttér: #FFF; Margó: 40px; Túlcsordulás: rejtett; }

Helymeghatározó elemek a “Wave2” és a “Wave3” osztályokkal úgy, hogy a választó “.Wave2 “kiderült, hogy a” Wave3 “választó felett található. Ezután növelje a blokkok méretét%, lekerekítette a széleket, és festse őket kék és piros színbe. Összefoglalva, hozzárendeli ezeket a blokkokat egy “hullám” nevű animációnak, amelyet az alábbiakban leírunk:

.Hullám2 {balra:%; Top: 30%; Háttérszín: kék; } .Hullám3 {balra:%; Top: 66%; Háttérszín: piros; } .Hullám2, .Hullám3 {Pozíció: abszolút; szélesség:%; Magasság:%; Border-sugara: 45%; Animáció: hullám 10-es lineáris végtelen; }

Itt az ideje, hogy újítsa meg blokkjainkat! Ehhez leírjuk az animáció “hullám” & #; Állítsa be a blokkok forgását fokozatra:

@Keyframe hullám {% {transzformáció: forgatás (DEG); }}

A fájlok változásainak mentése és a böngésző oldalának frissítése. Az orosz zászló animációja sikeres volt!

Azt hiszem, kitaláltad, hogy meg kell tennie, hogy az orosz tricolort egy másik ország tricolorjába fordítsa. Ehhez be kell állítanod a “#flag” választót, “.Hullám2 “és”.Wave3 »Más értékek a háttérben. Például, hogy átalakítsa az orosz zászlót Gabonsky, én változott a az ingatlan értéke background-color tulajdonság a #Flag választó egy zöld színű. # 4E9F

#Flag {háttérszín: # 4E9f61; }

Választók .Hullám2 I .Wave3 megváltoztatja a háttér színek sárga és kék, illetve:

.Hullám2 {háttér szín: #fcd; } .Hullám3 {háttér szín: # 3a75c3; }

Ennek eredményeként van egy szép Gabon zászló: