Bien que l'ajout de neige animée à une page web , qu'il s'agisse de la nôtre ou de celle d'un client, puisse paraître une pratique de conception dépassée, l' animation que nous présentons ici est d'une élégance remarquable. De plus, elle ne nécessite pas de JavaScript ; elle utilise uniquement du CSS3.
La première chose à faire est de regarder l'animation.
Ça a l'air plutôt bien, non ? Pour le mettre en pratique, il suffit de créer trois images avec des points blancs et de les animer à l'aide de la propriété CSS3 @keyframes comme suit :
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Ajouter les différents préfixes pour les différents navigateurs , puis les définir pour notre corps :
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Ajout également des préfixes nécessaires. La procédure complète avec des explications détaillées, gracieuseté de Joshua Johnson, peut être trouvée sur son blog.
Plus d'informations - Générateur de dégradés CSS3, Générateur de dégradés CSS3
La source - Cabane design