Čeprav na stran položite animirani sneg, naj bo to od nas ali od stranke, zveni kot oblikovalska praksa, starejša od česar koli drugega, resnica je, da animación ki ga predstavljamo ob tej priložnosti, je morje elegantnega. Prav tako ne potrebujete JavaScript, to je preprosto CSS3.
Najprej si oglejte animacija.
Izgleda precej dobro, kajne? Če ga želimo uporabiti v praksi, moramo ustvariti le tri slike z belimi pikami in jih animirati s pomočjo lastnosti @ključni okvirji CSS3, kot sledi:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Dodajanje drugačnega predpone za različne brskalnike, nato za naše telo določimo:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Dodajanje potrebnih predpon. Celoten postopek s podrobnimi obrazložitvami iz ljubezni Joshua Johnsona najdete na njegovem blogu.
Več informacij - CSS3 Gradient Generator, CSS3 Gradient Generator
Vir - Design Shack