Мада ставите анимирани снег на страницуБило од нас било од клијента, звучи као дизајнерска пракса старија од било чега другог, истина је таква анимација које овом приликом представљамо је море елегантног. Такође вам није потребан ЈаваСцрипт, то је једноставно ЦССКСНУМКС.
Прва ствар је да се погледа анимација.
Изгледа прилично добро, зар не? Да бисмо то применили у пракси, потребно је само да направимо три слике са белим тачкама и анимирамо их помоћу својства @кеифрамес ЦСС3 на следећи начин:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Додавање различитих префикси за различите прегледаче, затим успостављање за наше тело:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Такође додајући потребне префиксе. Комплетну процедуру са детаљним објашњењима, љубазношћу Јосхуа Јохнсона, можете пронаћи на његовом блогу.
Више информација - ЦСС3 Градиент Генератор, ЦСС3 Градиент Генератор
Извор - Десигн Схацк