На прошлом уроке мы создали футер, украшенный волной, в его верхней части. Согласитесь, что неплохо было бы оживить нашу волну — сделать анимацию.
HTML разметка
Добавим в HTML-код четыре волны с разными идентификаторами.
<div class="waves">
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div>
<div class="wave" id="wave3"></div>
<div class="wave" id="wave4"></div>
</div>
CSS стили
На данный момент все волны имеют одну и ту же позицию. Наша задача с помощью CSS-стилей раскидать все волны по разным слоям с разной прозрачностью и небольшим сдвигом. Волна #wave1 окажется на самом верхнем слое. А каждому слою задать бесконечную анимацию с разной длительностью цикла.
footer .wave#wave1{
z-index: 1000;/*на верхнем слое*/
opacity: 1;/*полная непрозрачность*/
bottom: 0;/*позиция снизу*/
animation: animate 4s linear infinite;/*свойства анимации*/
}
footer .wave#wave2{
z-index: 999;
opacity: 0.5;/*прозрачность 50%*/
bottom: 10px;
animation: animate2 4s linear infinite;
}
footer .wave#wave3{
z-index: 998;
opacity: 0.2;
bottom: 15px;
animation: animate 3s linear infinite;
}
footer .wave#wave4{
z-index: 999;
opacity: 0.7;
bottom: 20px;
animation: animate2 3s linear infinite;
}
Создание анимации
Создадим две анимации (animate, animate2) с двумя кадрами, где будет происходить смена позиции фона по координате X. Амплитуда движения волны составляет от 0 до 1000 пикселей.
@keyframes animate{
0%,100%
{
background-position-x: 1000px;
}
100%
{
background-position-x: 0px;
}
}
@keyframes animate2
{
0%,100%
{
background-position-x: 0px;
}
100%
{
background-position-x: 1000px;
}
}
