Skønt læg animeret sne på en sideEnten fra os eller fra en klient, det lyder som en designpraksis, der er ældre end noget andet, sandheden er, at animation som vi præsenterer ved denne lejlighed er havet af elegant. Du har heller ikke brug for JavaScript, det er simpelt CSS3.
Den første ting er at se på animationen.
Ser ret godt ud, ikke? For at omsætte det i praksis behøver vi kun oprette tre billeder med hvide prikker og animere dem ved hjælp af ejendommen @keyframes af CSS3 som følger:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Tilføjelse af forskellige præfikser til forskellige browsereog derefter etablere for vores krop:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Tilføjer også de nødvendige præfikser. Den fulde procedure med detaljerede forklaringer, med tilladelse fra Joshua Johnson, kan findes på hans blog.
Mere information - CSS3 Gradient Generator, CSS3 Gradient Generator
Kilde - Design Shack