Nors įdėti animuotą sniegą į puslapį, tiek iš mūsų, tiek iš kliento, skamba kaip senoviškesnė dizaino praktika nei bet kas kitas, tiesa yra ta animacija kurią pristatome šia proga, yra elegantiška jūra. Jums taip pat nereikia „JavaScript“, tai paprasta CSS3.
Pirmas dalykas yra pažvelgti animacija.
Atrodo gana gerai, tiesa? Norėdami tai praktiškai pritaikyti, mums reikia sukurti tik tris vaizdus su baltais taškeliais ir juos animuoti naudojant nuosavybę @rakto kadrai CSS3 taip:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Pridedant skirtingą priešdėliai skirtingoms naršyklėms, tada nustatydami mūsų kūnui:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Taip pat pridedami būtini priešdėliai. Visą procedūrą su išsamiais paaiškinimais, kuriuos sutiko Joshua Johnsonas, rasite jo tinklaraštyje.
Daugiau informacijos - CSS3 gradiento generatorius, CSS3 gradiento generatorius
Šaltinis - Dizainas shack