Effet de neige qui tombe

Bonjour,
j'avais trouvé ça, il y a déjà quelques temps. C'est tout en css. J'ai perdu le lien, mais c'était très réaliste. A défaut du lien, je poste ici l'ensemble du texte de l'auteur, plus le code de l'effet. Je n'ai pas testé ce code.
###########
Neige en css

Le principe de l’animation acquis, vous devriez vous rendre compte que vous allez donc avoir besoin de quatre surfaces de calque (du plus profond au plus proche) :

un fond (illustration, photo, aplat contrasté, etc)
nos particules fines (attention à la pollution !)
nos particules moyennes
nos particules larges

Conclusion : les particules proches seront plus grosses et plus rapides, alors qu’en s’éloignant, les autres calques de particules seront fins et lents.

Sur ce tuto, cela devrait vous donner ces 4 images (attention c’est un jpeg tout bête
------
Du côté du code HTML, nous allons simplement insérer dans body un conteneur avec 3 items à l’intérieur.
Côté body :

<div class="illustration">
	<div class="i-large"></div>
	<div class="i-medium"></div>
	<div class="i-small"></div>
</div>

------

CSS :

.illustration {
	position: relative;
	margin: 0 auto;
	width : 716px;
	height: 413px;
	background : url("./illustration.jpg") no-repeat top center;
}
 
.i-large,
.i-medium,
.i-small {
	position : absolute;
	top: 0; right: 0; bottom: 0; left: 0;
}
 
.i-large {
	background: url("./particules_large.png") repeat 0px 0px;
	-webkit-animation: dropFlowParticles 2s linear infinite;
	     -o-animation: dropFlowParticles 2s linear infinite;
	        animation: dropFlowParticles 2s linear infinite;
}
.i-medium {
	background: url("./particules_medium.png") repeat 0px 0px;
	-webkit-animation: dropFlowParticles 12s linear infinite;
	     -o-animation: dropFlowParticles 12s linear infinite;
	        animation: dropFlowParticles 12s linear infinite;
}
.i-small {
	background:url("./particules_small.png") repeat 0px 0px;
	-webkit-animation: dropFlowParticles 27s linear infinite;
	     -o-animation: dropFlowParticles 27s linear infinite;
	        animation: dropFlowParticles 27s linear infinite;
}
 
@-webkit-keyframes dropFlowParticles {
	from { background-position: 0 0; }
	to { background-position: 0 413px; }
}
@keyframes dropFlowParticles {
	from { background-position: 0 0; }
	to { background-position: 0 413px; }
}

Attention ici, chaque image est travaillée de telle sorte qu’aucune particule (ici les flocons) ne soient coupée sur leurs bordures. Pour que ce travail soit fait efficacement je vous invite à utiliser l’outil Translation de Photoshop (Filtres > Divers).

Aller plus loin

Le tuto présente une animation extrêmement simple avec une seul séquence keyframes. Lors de vos animations, augmenter les étapes, changer les directions et multiplier les séquences permet d’augmenter le réalisme.