Bár animált havat tegyen egy oldalraakár tőlünk, akár megrendelőtől származik, mindennél ősibb tervezési gyakorlatnak tűnik, az az igazság, hogy a animación amit ez alkalomból bemutatunk, az elegáns tenger. Önnek nincs szüksége JavaScriptre, ez egyszerű CSS3.
Az első dolog egy pillantás az animáció.
Nagyon jól néz ki, igaz? A gyakorlatba való átültetéshez csak három képet kell létrehoznunk fehér pöttyökkel, és animálni kell őket a tulajdonság használatával @ kulcsképek az alábbiak szerint:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
A különböző hozzáadása előtagok a különböző böngészőkhöz, majd megállapítja a testünk számára:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
A szükséges előtagok hozzáadása is. Joshua Johnson jóvoltából részletes magyarázatokat tartalmazó részletes eljárás megtalálható az ő blogján.
Több információ - CSS3 gradiens generátor, CSS3 gradiens generátor
Forrás - Design Shack