Плавно падающий фоновый снег на чистом CSS3
Отличный анимированный фон с эффектом падающего снега на чистом CSS
Для начала посмотрите ДЕМО
Установка:
В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@-webkit-keyframes SNOW { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 320px, 0 300px, 0 275px, 0 0; } } @-webkit-keyframes WIGGLE { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: -20px 0, 10px 0, -5px 0, 0 0; } } @keyframes SNOW { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 320px, 0 300px, 0 275px, 0 0; } } @keyframes WIGGLE { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: -20px 0, 10px 0, -5px 0, 0 0; } } body { background: url(/img/snow_500x320.png) 100% 0 repeat, url(/img/snow_300x300.png) 50% 50% repeat, url(/img/snow_335x275.png) 0 0 repeat, linear-gradient(to bottom, rgb(0,0,50) 0, rgb(25,0,102)); background-attachment: fixed, fixed, fixed, scroll; -webkit-animation: SNOW 10s linear infinite/*, WIGGLE 2s ease-in-out infinite alternate*/; animation: SNOW 10s linear infinite; } |
Осталось лишь залить три картинки из прикреплённого архива в папку img
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
