Selv legg animert snø på en side, det være seg fra oss eller fra en klient, det høres ut som en designpraksis som er eldre enn noe annet, sannheten er at animasjon som vi presenterer ved denne anledningen er havet av elegant. Du trenger heller ikke JavaScript, det er enkelt CSS3.
Det første er å ta en titt på animasjonen.
Ser ganske bra ut, ikke sant? For å praktisere det, trenger vi bare å lage tre bilder med hvite prikker og animere dem ved hjelp av eiendommen @keyframes av CSS3 som følger:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Legge til forskjellige prefikser for forskjellige nettlesere, deretter etablere for kroppen vår:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Legger også til de nødvendige prefiksene. Den fullstendige prosedyren med detaljerte forklaringer, med tillatelse fra Joshua Johnson, finner du på bloggen hans.
Mer informasjon - CSS3 Gradient Generator, CSS3 Gradient Generator
Kilde - Design Shack