Neige animée avec CSS

Neige animée avec CSS3

Bien que mettre de la neige animée sur une pageque ce soit de notre part ou d'un client, cela ressemble à une pratique de design plus ancienne que toute autre chose, la vérité est que le d'animation que nous vous présentons à cette occasion est la mer des élégants. De plus, vous n'avez pas besoin de JavaScript, c'est simple CSS3.

La première chose à faire est de jeter un œil à 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é @images clés de CSS3 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 différents navigateurs, puis établissant 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


Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués avec *

*

*

  1. Responsable des données: Miguel Ángel Gatón
  2. Finalité des données: Contrôle du SPAM, gestion des commentaires.
  3. Légitimation: votre consentement
  4. Communication des données: Les données ne seront pas communiquées à des tiers sauf obligation légale.
  5. Stockage des données: base de données hébergée par Occentus Networks (EU)
  6. Droits: à tout moment, vous pouvez limiter, récupérer et supprimer vos informations.