Сегодня мы создадим эффект падающего снега при помощи одного только CSS3, этот эффект отлично подойдет для создания новогодних и рождественских открыток.
Admin
Создание данного эффекта займет у вас всего лишь несколько минут, так как для него мы будем использовать только несколько фоновых картинок и CSS3 анимацию.
Итак, приступим.
HTML-код будет предельно простой:
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title>С Новым Годом!</title>
</head>
<body>
<div id="wrapper">
<h1>С Новым Годом!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
</div>
</body>
</html>
Фон для нашей открытки можно выбрать любой. Для него можно выбрать элемент body. Стиль может выглядеть примерно так:
body {
background-image: url('christmas.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Здесь мы использовали background-size: cover, чтобы наш фон масштабировался с сохранением пропорций.
Для создания падающего снега мы используем следующую идею. Возьмем три картинки со снежинками, разного размера и прозрачным фоном. Вы можете добавить и больше, если вам так нравится, но мы не будем устраивать здесь "метель" и ограничимся тремя. Картинки со снежинками представляют собой квадратные PNG-изображения, размером 500, 400 и 300 пикселей, и, как я уже говорил, с прозрачным фоном. Снежинки можно нарисовать в Photoshop или Gimp с помощью соответствующих кистей. Я использовал кисти для Gimp GIMP Snowflake Brushes by ~Project-GimpBC. Также снежинкам можно задать разный размер и разную степень размытия, чтобы они выглядели более естественно.
Теперь мы применим эти изображения для нашего блока-обертки <div id="wrapper">. Зададим ему высоту 100vh, чтобы он занял всю площаль окна.
Использование нескольких фоновых изображений по синтаксису не отличается от использования только одного фона. Единственным отличием является то, что вы перечисляете через запятую все изображения используемые в качестве фона. В результате мы получим следующее:
div#wrapper {
background-image: url('i/flake1.png'), url('i/flake2.png'), url('i/flake3.png');
background-repeat: no-repeat;
height: 100vh;
animation: snow 20s linear infinite;
}
Для создания анимации мы будем использовать @keyframes. Имя для анимации зададим, например, snow. Далее мы создадим два фрейма. Первый это то как наша страница будет выглядеть в начале анимации, второй – то, как она будет выглядеть в конце. В исходном состоянии я разместил все наши фоновые изображения по верхней кромке страницы, определив background-position в процентах. Затем каждое изображение будет перемещено в разные места на странице с заданием конечных координат также в процентах.
На следующем шаге мы зададим правила показа анимации. Сначала мы указываем имя анимации, которую мы хотим использовать, в данном случае "snow", затем длительность анимации (20 секунд), затем выбираем тип анимации (linear) и, наконец, цикл анимации - бесконечный.
div#wrapper {
background-image: url('i/flake1.png'), url('i/flake2.png'), url('i/flake3.png');
background-repeat: no-repeat;
height: 100vh;
animation: snow 20s linear infinite;
}
@keyframes snow {
0% {background-position: 10% 1rem, 50% 5rem, 80% 2rem;}
100% {background-position: 80% 100%, 10% 100%, 50% 100%;}
}
Это и есть все наши стили!
Итак, мы продемонстрировали идею создания симпатичной новогодней открытки, которая не будет работать разве что в IE6. Идею мы продемонстрировали. За вами весь остальной креатив!
© 2008 - 2024 Webmasters.BY Все права защищены
Новый комментарий