Падающий снег с помощью CSS3
1737
8.4 из 10
Проголосовало: 16
Проголосовало: 16
В этом уроке мы научимся создавать падающий снег без применения javascript.
Сначала нужно создать картинки с падающим снегом и картинку для фона.
HTML
Создаём контейнер для картинок с падающим снегом.
Код
<div id="wrapper">
<h2>С Новым Годом!</h2>
</div>
<h2>С Новым Годом!</h2>
</div>
CSS
Код
#wrapper {
background-image:url(url('http://webo4ka.ru/webo4ka/img/logo/1.png'),'http://webo4ka.ru/webo4ka/img/logo/2.png'),url('http://webo4ka.ru/webo4ka/img/logo/3.png'),url('images/snowflake2.png');
height:100%;
-webkit-animation:snow 30s linear infinite;
-moz-animation:snow 30s linear infinite;
-o-animation:snow 30s linear infinite;
-ms-animation:snow 30s linear infinite;
animation:snow 30s linear infinite 0s
}
В этот контейнер мы разместим наши четыре изображения со снежинками и создадим для них анимацию:
show - название нашей анимациии, правила для неё мы пропишем позже;
30s - время за которое проходит анимация через экран, чем больше время тем медленнее падает снег. Соответственно чем, меньше время тем быстрее падает.
liner - анимация проходит линейно.
infinite - анимация будет продолжаться бесконечно.
Создадим правила для нашей анимации:
Код
@keyframes snow{
0% {background-position:0 0,0 0,0 0,0 0;}
100% {background-position:500px 1000px,600px 900px,400px 400px,300px 300px}
}
@-moz-keyframes snow{
0% {background-position:0 0,0 0,0 0,0 0;}
100% {background-position:500px 1000px,600px 900px,400px 400px,300px 300px}
}
@-o-keyframes snow{
0% {background-position:0 0,0 0,0 0;}
100% {background-position:500px 1000px,600px 900px,400px 400px,300px 300px}
}
@-webkit-keyframes snow{
0% {background-position:0 0,0 0,0 0;}
100% {background-position:500px 1000px,600px 900px,400px 400px,300px 300px}
}
@-ms-keyframes snow{
0% {background-position:0 0,0 0,0 0;}
100% {background-position:500px 1000px,600px 900px,400px 400px,300px 300px}
}
0% {background-position:0 0,0 0,0 0,0 0;}
100% {background-position:500px 1000px,600px 900px,400px 400px,300px 300px}
}
@-moz-keyframes snow{
0% {background-position:0 0,0 0,0 0,0 0;}
100% {background-position:500px 1000px,600px 900px,400px 400px,300px 300px}
}
@-o-keyframes snow{
0% {background-position:0 0,0 0,0 0;}
100% {background-position:500px 1000px,600px 900px,400px 400px,300px 300px}
}
@-webkit-keyframes snow{
0% {background-position:0 0,0 0,0 0;}
100% {background-position:500px 1000px,600px 900px,400px 400px,300px 300px}
}
@-ms-keyframes snow{
0% {background-position:0 0,0 0,0 0;}
100% {background-position:500px 1000px,600px 900px,400px 400px,300px 300px}
}
Здесь видно что наши картинки будут двигаться слева направо и сверху вниз по диагонали.
Вы можете поэксперементировать со скоростью движения снежинок и их направлением движения.
Автор публикации: Загрузка
Загрузка
- Оставить первым комментарий:
Меню сайта
Категории
Мини-чат
Последние комментарии
Это моя работа, которая велась давольно таки давно 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Последние темы
Опрос
Статистика
| 0 онлайн |
0 наших |
0 чужих |
0
Сегодня были
Топ пользователей:
 |  |  |  |  |  |
 |  |  |  |  |  |
- Обратная связь
- Правила
- RSS
- +18
- Мобильная версия
- Хостинг от uCoz
- Copyright - webo4ka.ru © 2010-2025 г.
- Design by Вовчик Администратор:)