Иногда при создании своего сайта перед веб-мастером встает задача привлечь внимание пользователей к тому или иному объекту страницы. Таким образом необходимо выделить какую-то часть сайта или отдельный блок, который будет отличаться от других. Таких методов конечно много, но вот с приходом css3 возможен вариант анимации отдельного блока к примеру. Сегодня рассмотрим анимацию фона блока div для своего сайта. Для создании анимации был введен новый селектор в css3. Для создания анимации разные браузеры поддерживают разные селекторы для анимирования.
По этому для создания валидной анимации на сайте необходимо учитывать все нюансы и подстраивать сайт под их потребности. Приведу ниже примеры селекторов для отображения анимации в популярных браузерах.
Пример поддержки селекторов для анимации в большинстве браузеров
animation - Chrome, Firefox 16+, IE 10+, Opera 12.10+
-webkit-animation - Chrome, Safari 5+
-moz-animation - Firefox 5-15
-o-animation - Opera 12.00
С селекторами для анимации разобрались, давайте посмотрим пример того. что можно реализовать с помощью анимации в css3
Для реализации данного примера создадим простой блок див с следующим исходным кодом.
HTML код
<div class="color-background">
<div class="color-me">
<p>
Текст в параграфе с анимированным фоном в блоке div
</p>
Просто текст в блоке div с анимированным фоном
</div>
</div>
Ничего сложного самый простой див в котором происходит анимация фона в нескольких цветах.
Ну и переходим к основному к стилизации css3 анимации фона.
.color-background {
position: absolute;
top: 0;
left: 0;
margin: 0 auto;
padding: 0;
height: 100%;
width: 100%;
animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
-webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
-moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
-o-animation: colorBackground 20s infinite; /* Opera 12.00 */
}
@keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
@-webkit-keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
@-moz-keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
@-o-keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
.color-me {
position: relative;
top: 35%;
background-color: #fff;
padding: 20px;
font-size: 50px;
text-align: center;
letter-spacing: 3px;
}
.color-background .color-me p {
padding: 0;
margin: 0 0 -15px 0;
color: #777;
letter-spacing: 5px;
font-size: 20px;
text-transform: uppercase;
}
Для реализации скопируйте данный код, добавляем его в свою таблицу стилей и пользуемся. Я думаю больше ничего объяснять нет смысла берём встраиваем и наслаждаемся анимироваыным фоном своего блока на вашем сайте.
Удачных разработок увидимся в следующих публикациях!