Створюємо ефект падаючого снігу на веб-сторінці за допомогою css3

Створюємо ефект падаючого снігу на веб-сторінці за допомогою CSS3

Сьогодні ми створимо ефект падаючого снігу за допомогою одного тільки CSS3, цей ефект відмінно підійде для створення новорічних і різдвяних листівок. Створення даного ефекту забере у вас всього лише кілька хвилин, так як для нього ми будемо використовувати тільки кілька фонових картинок і CSS3 анімацію.

HTML-код буде гранично простий:

З Різдвом і Новим роком!

Для початку ми створимо фон для нашої листівки, для цього можна підібрати будь-яку красиву картинку відповідну тематиці. І поставимо наступні стилі для body, щоб наша картинка не розмножувалася на екрані:

body # 123;
background-image. url # 40; 'Christmas.jpg' # 41; ;
background-repeat. no-repeat;
background-attachment. fixed;
-webkit-background- size. cover;
-moz-background- size. cover;
-o-background- size. cover;
-ms-background- size. cover;
background- size. cover;
# 125;

Тут ми використовували background-size: cover. щоб наш фон масштабувати зі збереженням пропорцій.

Для створення падаючого снігу ми використовуємо таку ідею. для цього візьмемо три картинки зі сніжинками, різного розміру і прозорим фоном. Ви можете додати і більше, якщо вам так подобається, але ми не будемо влаштовувати тут "заметіль" і обмежимося трьома. Картинки зі сніжинками є квадратні PNG-зображення, розміром 500, 400 і 300 пікселів, і, як я вже говорив, з прозорим фоном. Сніжинки можна намалювати в Photoshop або Gimp за допомогою відповідних кистей. Я використовував кисті для Gimp GIMP Snowflake Brushes by

Project-GimpBC. Також сніжинкам можна задати різний розмір і різну ступінь розмиття, щоб вони виглядали більш природно.

Тепер ми застосуємо ці зображення для нашого блоку-обгортки (

). Задамо йому висоту 100%, щоб він зайняв всю площаль вікна, також не забудемо вказати таку ж висоту і для тегів html і body.

Використання декількох фонових зображень, по синтаксису, не відрізняється від використання тільки одного фону, єдиною відмінністю є те, що ви перераховуєте через кому все зображення використовуються в якості фону. В результаті ми отримаємо наступне :.

html. body # 123;
height. 100%;
# 125;

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

Для створення анімації ми будемо використовувати @keyframes. Ім'я для анімації задамо, наприклад, snow. Далі ми створимо два фрейми. Перший, це те як наша сторінка буде виглядати на початку анімації, другий - це те, як вона буде виглядати в кінці. На початку я розмістив всі наші фонові зображення в лівому верхньому кутку сторінки, визначивши background-position рівну "0px 0px". Потім ми переміщаємо кожне зображення в різні місця на сторінці.

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

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

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

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

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

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

На наступному кроці ми поставимо правила показу анімації. Спочатку ми вказуємо ім'я анімації, яку ми хочемо використовувати, в даному випадку "snow", потім тривалість анімації (20 секунд), потім вибираємо тип анімації (linear) і, нарешті, цикл анімації - нескінченний.

div #wrapper # 123;
background-image. url # 40; 'Snowflake.png' # 41 ;. url # 40; 'Snowflake3.png' # 41 ;. url # 40; 'Snowflake2.png' # 41; ;
height. 100%;
-webkit-animation. snow 20s linear infinite;
-moz-animation. snow 20s linear infinite;
-ms-animation. snow 20s linear infinite;
animation. snow 20s linear infinite;
# 125;

Для написи можна використовувати який-небудь гарний шрифт, в даному прикладі я використав шрифт Lobster, який підключив до сторінки за допомогою Google Web Fonts.

І ось що у нас в результаті вийшло:

Отже, у нас вийшла симпатична новорічна листівка, але, на жаль, вона буде "працювати" тільки в Firefox, Chrome і Safari. IE починає підтримувати keyframes тільки з 10 версії, Opera на даний момент також не підтримує цю анімацію.