Vaikka laittaa animoitu lumi sivulleolipa se meiltä tai asiakkaalta, se kuulostaa suunnittelukäytännöltä, joka on vanhempi kuin mikään muu, totuus on, että Animacion jonka esitämme tässä yhteydessä, on tyylikäs meri. Et myöskään tarvitse JavaScriptiä, se on yksinkertaista CSS3.
Ensimmäinen asia on vilkaista animaatio.
Näyttää melko hyvältä, eikö? Sen toteuttamiseksi käytännössä meidän on luotava vain kolme kuvaa valkoisilla pisteillä ja animoitava ne ominaisuuden avulla @ avainkehykset CSS3: n seuraavasti:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Erilaisten lisääminen etuliitteet eri selaimille, sitten vahvistamalla kehollemme:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Lisää myös tarvittavat etuliitteet. Koko menettely ja yksityiskohtaiset selitykset Joshua Johnsonin luvalla, löytyy hänen blogistaan.
Lisää tietoa - CSS3-gradienttigeneraattori, CSS3-gradienttigeneraattori
Lähde - Design Shack