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

Анимированный 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 у веб-сайта (продолжение)

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий

5 × три =