Embora colocar neve animada em uma página, seja de nós ou de um cliente, parece uma prática de design mais antiga do que qualquer outra coisa, a verdade é que o Animación que apresentamos nesta ocasião é o mar de elegante. Além disso, você não precisa de JavaScript, é simples CSS3.
A primeira coisa é dar uma olhada a animação.
Parece muito bom, certo? Para colocá-lo em prática, precisamos apenas criar três imagens com pontos brancos e animá-las usando a propriedade @frameschave de CSS3 da seguinte forma:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Adicionando o diferente prefixos para navegadores diferentes, então estabelecendo para o nosso corpo:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Também adicionando os prefixos necessários. O procedimento completo com explicações detalhadas, cortesia de Joshua Johnson, pode ser encontrado em seu blog.
Mais informação - CSS3 Gradient Generator, CSS3 Gradient Generator
Fonte - Barraca de Design