Készítsen hóesésben egy weboldal segítségével css3

Készítsen hóesésben egy weboldal segítségével CSS3

Ma megteremtse a hatása hóesésben segítségével egyetlen CSS3, ez a hatás tökéletes létrehozása újévi és karácsonyi képeslapokat. Létre ezt a hatást elviszi csak néhány percre, így fogjuk használni csak néhány háttérképet, és CSS3 animációk neki.

HTML-kód nagyon egyszerű:

Kellemes Karácsonyi Ünnepeket és Boldog Új Évet!

Először létrehozunk egy hátteret a kártyát, ez lehet felvenni bármilyen szép képet releváns témákról. És állítsa be a következő stílusokat a szervezet számára, hogy a mi kép nem tenyésztik a képernyőn:

szerv # 123;
background-image. url # 40; 'Christmas.jpg' # 41; ;
background-repeat. no-repeat;
háttér-mellékletet. rögzített;
-WebKit-háttér-méret. fedezésére;
-moz-háttér-méret. fedezésére;
-o-háttér-méretű. fedezésére;
-ms-háttér-méret. fedezésére;
háttér-méret. fedezésére;
# 125;

Itt felhasználtuk a háttér-size: fedelet. a mi háttér méretezhető arányosan.

Létrehozásához a hóesés, akkor használja a következő ötlet. Ehhez Három kép hópelyhek, különböző méretű és átlátható alapon. Akkor még több, ha úgy tetszik, de nem fogja itt „hóvihar”, és csak három. hópelyhek képek négyzetes PNG kép mérete 500, 400 és 300 pixel, és mint mondtam, átlátszó háttérrel. Hópelyhek lehet levonni a Photoshop vagy Gimp a megfelelő ecseteket. Én használt kefék Gimp GIMP Hópehely kefék

Project-GimpBC. Továbbá, a hópelyhek lehet beállítani a különböző méretű és különböző mértékű elmosódás, hogy úgy tűnjön, természetes.

Most alkalmazzák ezeket a képeket a mi blokk átalakító (

). Kérdezd meg, magassága 100%, hogy megtett minden ploschal ablak is nem szabad elfelejteni, hogy adja meg ugyanazt a magasságot és a html és a test címkéket.

A több háttérképeket, a szintaxis nem különbözik a használata csak egy háttér, az egyetlen különbség az, hogy felsorolni, vesszővel elválasztva az összes képet használni, mint háttér. Ennek eredményeképpen megkapjuk a következő:.

html. szerv # 123;
magasságot. 100%;
# 125;

div #wrapper # 123;
background-image. url # 40; 'Snowflake1.png' # 41;. url # 40; 'Snowflake3.png' # 41;. url # 40; 'Snowflake2.png' # 41; ;
magasságot. 100%;
# 125;

Az animáció létrehozása fogjuk használni @keyframes. A név az animációs kérni, például a havat. Ezután fogunk létrehozni két képkocka. Először is, ez hogyan oldal így fog kinézni az elején az animáció, a második - ez hogyan fog kinézni a végén. Az elején azt elhelyezte minden kedves háttérképet a bal felső sarokban az oldal, meghatározva background-position egyenlő „0px 0px”. Aztán haladunk minden kép a különböző helyeken az oldalon.

@keyframes hó <
0% # 123; background-position. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; background-position. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

Felhívjuk figyelmét, hogy regisztrálnia kell a megfelelő előtagot minden böngésző itt. Ennek eredményeként, a kód a következő lesz:

@keyframes hó <
0% # 123; background-position. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; background-position. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

@ -moz-Kulcsképek hó <
0% # 123; background-position. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; background-position. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

@ -webkit-Kulcsképek hó <
0% # 123; background-position. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; background-position. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

@-MS-Kulcsképek hó <
0% # 123; background-position. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; background-position. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

A következő lépésben meghatározzuk az animációs megjelenítési szabály. Először adja meg a nevét az animáció, szeretnénk használni, ebben az esetben a „hó”, akkor az időtartam az animáció (20 másodperc), majd válassza ki, hogy milyen típusú animáció (lineáris is), és végül, az animáció hurok - végtelen.

div #wrapper # 123;
background-image. url # 40; 'Snowflake.png' # 41;. url # 40; 'Snowflake3.png' # 41;. url # 40; 'Snowflake2.png' # 41; ;
magasságot. 100%;
-WebKit-animáció. hó 20-as lineáris végtelen;
-moz-animáció. hó 20-as lineáris végtelen;
-ms-animáció. hó 20-as lineáris végtelen;
animáció. hó 20-as lineáris végtelen;
# 125;

Mert betűk segítségével néhány szép font, ebben a példában használtam a betűtípus Lobster, amely kapcsolódik az oldalhoz a Google Web Fonts.

És ez az, amit mi ennek eredményeként kiderült:

Így kapunk egy szép karácsonyi kártyát, de sajnos ez lesz a „munka” csak a Firefox, Chrome és Safari. IE kezd támogatni kulcskockákat csak 10-es verziója, az Opera jelenleg nem támogatja ezt animáció.

előző ◈ a következő