Анимированный снег с CSS

Хотя разместить анимированный снег на странице, будь то от нас или от клиента, это звучит как устаревшая дизайнерская практика, правда в том, что анимация то, что мы представляем по этому случаю, - это море элегантности. Также вам не нужен JavaScript, это просто CSS3.

Первым делом нужно взглянуть на анимация.

Выглядит неплохо, правда? Чтобы применить это на практике, нам нужно всего лишь создать три изображения с белыми точками и анимировать их с помощью свойства @ключевые кадры 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 Gradient Generator, CSS3 Gradient Generator
Источник - Дизайн Shack