Добрый день дорогие друзья.
Это песочница Виктора Доценко и собственно сам Виктор Доценко. Рад знакомству, если вы впервые в моем блоге. Сегодня мы с вами рассмотрим на примере, как можно создать многослойное фоновое изображение и попробуем его анимировать. Это будет довольно легко ведь все это позволяет нам сделать CSS3. Интересно? Тогда смело отправляйся в полную версию статьи.
Немного истории
Добавление фонового изображения — это далеко не новая возможность. Она существует уже довольно давно. Но мы были ограниченны тем, что могли добавить лишь одно изображение. Появился CSS3 и дал нам более широкие возможности и возможность добавления нескольких фоновых изображений (Multiple Backgrounds).
Как использовать Multiple Backgrounds?
В старые времена, когда нам требовалось добавить более одного фонового изображения, мы должны были прерывать нашу HTML разметку, а так же добавить дополнительные классы для достижения нужного нам результата через CSS. Выглядело это примерно вот так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.overcast1 { background-image: url("images/overcast.png"); background-position: 150px 25px; } .rainbow { background-image: url("images/rainbow.png"); background-position: 200px 10px; } .overcast2 { background-image: url("images/overcast.png"); background-position: 250px 25px; } .sunny { background-image: url("images/sunny.png"); background-position: 100px 10px; } |
Теперь код, который чуть выше выглядит совсем лишним. Все это просто сделать в CSS3 через - background-image. Теперь код выглядит вот так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.weather { width: 500px; height: 280px; margin: 50px auto; background-image: url("images/overcast.png"), url("images/rainbow.png"), url("images/overcast.png"), url("images/sunny.png"); background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px; background-repeat: no-repeat; } |
С этим кодом, мы добавили все те же четыре изображения с различными позициями производя вот такой вот красивый вид:
Добавляем эффекты анимации
Кроме того, что мы уже с вами сделали мы можем добавить еще и эффектов к данному уроку.
Для того, чтобы кодировать было проще мы будем использовать W3C стандарт. Для IE9, Firefox, Opera, Chrome и Safari, по прежнему нужно использовать их личные префиксы.
|
1 2 3 4 5 6 7 8 |
@keyframes weather { 0% { background-position: 120px 25px, 200px 10px, 280px 25px, 80px 10px; } 100% { background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px; } } |
После того как мы определили @keyframes, то остается лишь добавить анимации для ключевого кадра, в данном случае .weather
|
1 2 3 |
.weather { animation: weather 5s; } |
Вот и все! Теперь вы можете посмотреть демонстрацию с анимацией (корректная работа в Chrome и Safari) и скачать исходники для своих экспериментов.
Надеюсь статья была полезна вам дорогие друзья. Не забывайте подписываться на RSS, рассылку на почту и чаще посещайте блог Виктора Доценко, а так же комментируйте и делитесь ссылками в социальные сети. Всего доброго дорогие друзья.
P.S: upd 03.06.2013