Падающий снег на чистом CSS

Продолжая зимнюю тематику, хочу поделиться тем, как можно реализовать на сайте такую штуку как падающий снег.

Данный эффект сделан на чистом CSS без JavaScript. Реализовать можно на любом сайте независимо от его CMS (движка).

CSS падающий снег для сайта

Думаю что долго со вступлением затягивать не нужно и сразу перейдём к демо:

А у нас зима!

Ну как? Нормально?

Замечу, что это не картинка, а блок div для которого прописан CSS падающего снега.

Реализация самая простая - три изображения и небольшой код CSS.

CSS код:

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url('img/snow.png'), url('img/snow3.png'), url('img/snow2.png');
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
}

@keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-color:#b4cfe0;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}

@-ms-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Добавьте этот код в основной css файл вашего сайта.

В коде главное правильно указать пути к изображениям в свойстве background-image у класса body.

Укажите пути к изображениям так, как они лежат у вас на сайте.