Анимированный footer у веб-сайта (продолжение)

Анимированный footer у веб-сайта (продолжение)

На прошлом уроке мы создали футер, украшенный волной, в его верхней части. Согласитесь, что неплохо было бы оживить нашу волну — сделать анимацию.

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>

Анимированный footer у веб-сайта (продолжение)

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;
    }
}

Анимированный footer у веб-сайта (продолжение)

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button