Sebbene mettere la neve animata su una paginasia da noi che da un cliente, suona come uno studio di design più antico di ogni altra cosa, la verità è che il animazione quello che vi presentiamo in questa occasione è il mare dell'elegante. Inoltre non hai bisogno di JavaScript, è semplice CSS3.
La prima cosa è dare un'occhiata l'animazione.
Sembra piuttosto buono, vero? Per metterlo in pratica dobbiamo solo creare tre immagini con punti bianchi e animarle utilizzando la proprietà @fotogrammi chiave di CSS3 come segue:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Aggiungendo il diverso prefissi per diversi browser, quindi stabilendo per il nostro corpo:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Aggiungendo anche i prefissi necessari. La procedura completa con spiegazioni dettagliate, per gentile concessione di Joshua Johnson, può essere trovata sul suo blog.
Maggiori informazioni - CSS3 Gradient Generator, CSS3 Gradient Generator
Fonte - Design Shack