Хоча покладіть анімований сніг на сторінкуАбо від нас, або від клієнта, це звучить як практика дизайну, старша за все інше, правда в тому, що анімація що ми представляємо з цієї нагоди - це море елегантного. Також вам не потрібен JavaScript, це просто CSS3.
Перше, що потрібно поглянути анімація.
Виглядає досить добре, так? Щоб застосувати це на практиці, нам потрібно лише створити три зображення з білими крапками та анімувати їх за допомогою властивості @keyframes CSS3 наступним чином:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Додавання різних префікси для різних браузерів, потім встановивши для нашого організму:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Також додавання необхідних префіксів. Повну процедуру з докладними поясненнями, наданими Джошуа Джонсоном, можна знайти в його блозі.
Більше інформації - Генератор градієнтів CSS3, Генератор градієнтів CSS3
Джерело - Дизайн Shack