Създаване на падащ сняг в уеб страница с помощта на CSS3

Днес ние ще се създаде ефекта на падащ сняг с помощта на само един от CSS3, този ефект е идеална за създаване на Нова година и коледни картички. Създаването на този ефект ще ви отнеме само няколко минути, така че ние ще използваме само няколко фонови изображения и CSS3 анимации за него.

HTML-кодът е много проста:

Весела Коледа и Щастлива Нова Година!

Първо, ние се създаде фон за нашата карта, това може да вземете някоя красива картина на съответните теми. И поставя следните стилове за тялото, така че нашата картина не е отгледан на екрана:

тяло # 123;
фон-изображение. URL # 40; "Christmas.jpg" # 41; ;
фон-повторете. никой не се повтаря;
фон-свързване. фиксиран;
-WebKit-background- размер. покрие;
-Моз-background- размер. покрие;
-о-background- размер. покрие;
-MS-background- размер. покрие;
background- размер. покрие;
# 125;

Тук сме използвали фон-размер: покривка. в нашия фон мащабира пропорционално.

За да създадете падащия сняг, ние използваме следната идея. За да направите това, да вземе три снимки с снежинки, различни по размер и прозрачен фон. Можете да добавите повече, ако искате, но ние няма да се задържи тук "виелица" и ограничени до три. с снежинки снимки са квадратни PNG размера на изображението на 500, 400 и 300 пиксела, и, както каза, с прозрачен фон. Снежинки могат да бъдат направени в Photoshop или Gimp като се използват подходящи четки. Използвах четки за Gimp GIMP снежинка четки от

Проект-GimpBC. Също така, снежинките могат да се задават в различни размери и с различна степен на размазване, за да изглежда по-естествено.

Сега ние прилагаме тези образи в нашия блок обвивка (

). Попитай го височина от 100%, така че е взел всички ploschal прозорец също не забравяйте да посочите една и съща височина и HTML и телесни маркери.

Използване на няколко фонови изображения, синтаксисът не се различава от използването на само един фон, като единствената разлика е, че сте указали, разделени със запетаи всички изображения се използват като фон. В резултат на това, ние получаваме следното:.

HTML. тяло # 123;
височина. 100%;
# 125;

Разделение #wrapper # 123;
фон-изображение. URL # 40; "Snowflake1.png" # 41. URL # 40; "Snowflake3.png" # 41. URL # 40; "Snowflake2.png" # 41; ;
височина. 100%;
# 125;

За да създадете анимация, ние ще използваме @keyframes. Името на анимацията попитам, например, сняг. На следващо място, ние ще създадем две рамки. На първо място, това е начинът нашата страница ще изглежда в началото на анимацията, а вторият - това е как ще изглежда в края на краищата. В началото Поставил съм всички наши фоново изображение в горния ляв ъгъл на страницата, като посочва фон-позиция, равен на "0px 0px". Тогава ние се движим всяко изображение на различни места по страницата.

@keyframes сняг <
0% # 123; фон-позиция. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; фон-позиция. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

Моля, имайте предвид, че трябва да се регистрирате подходящия префикс за всеки браузър тук. В резултат на това кодът ще бъде, както следва:

@keyframes сняг <
0% # 123; фон-позиция. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; фон-позиция. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

@ -moz-ключови кадри сняг <
0% # 123; фон-позиция. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; фон-позиция. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

@ -webkit-ключови кадри сняг <
0% # 123; фон-позиция. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; фон-позиция. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

@ -MS-ключови кадри сняг <
0% # 123; фон-позиция. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; фон-позиция. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

В следващата стъпка ние определяме правилото за анимация на дисплея. Първо, ние посочва името на анимацията, ние искаме да се използва, в този случай, "сняг", след това продължителността на анимацията (20 секунди), а след това изберете вида на анимация (линеен е) и, накрая, анимация линия - безкраен.

Разделение #wrapper # 123;
фон-изображение. URL # 40; "Snowflake.png" # 41. URL # 40; "Snowflake3.png" # 41. URL # 40; "Snowflake2.png" # 41; ;
височина. 100%;
-WebKit-анимация. сняг 20-те линейни безкрайно;
-Моз-анимация. сняг 20-те линейни безкрайно;
-MS-анимация. сняг 20-те линейни безкрайно;
анимация. сняг 20-те линейни безкрайно;
# 125;

И за надписа можете да използвате някои красив шрифт, в този пример, аз използвах Lobster на шрифта, който е свързан към страницата с помощта на уеб шрифтове на Google.

И това е, което имаме като резултат се оказа:

Така че, ние се сдобиете с прекрасен коледна картичка, но за съжаление тя ще "работят" само в Firefox, Chrome и Safari. IE започва да подкрепят ключови кадри само с версия 10, Opera в момента не поддържа тази анимация.