Although put animated snow on a page, be it from us or from a client, it sounds like a design practice older than anything else, the truth is that the animation that we present on this occasion is the sea of elegant. Also you don't need JavaScript, it's simple CSS3.
The first thing is to take a look at the animation.
Looks pretty good, right? To put it into practice, we only need to create three images with white dots and animate them using the property @keyframes of CSS3 as follows:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Adding the different prefixes for different browsers, then establishing for our body:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Also adding the necessary prefixes. The full procedure with detailed explanations, courtesy of Joshua Johnson, can be found on his blog.
More information - CSS3 Gradient Generator, CSS3 Gradient Generator
Source - design shack