Эффект волны на CSS

Анимация на CSS способна преобразить страницу и задержать внимание пользователя эффектной подачей. Предлагаю потренироваться и создать CSS анимацию, имитирующую эффект волны! Приготовление этой «вкусняшки» из мира веб-строительства займет совсем немного времени: около 10-15 минут. А принцип, лежащий в основе её создания, позволит воплотить в жизнь фантазии дизайнеров о развевающихся на ветру вуалях, флагах и прочих элементах прекрасного. Итак, не будем больше тратить время на описательную базу, приступим к конкретике.

Цель: имитировать движение волн посредством анимации на CSS. В результате должны получиться два анимированных блока, представленных в начале статьи.

Инструменты: HTML, CSS

Основной принцип заключается в бесконечном процессе поворота скругленных блоков на 360 градусов. Каждый из скругленных блоков окрашен в цвет волны и является дочерним по отношению к фоновому блоку. Из-за того, что область видимости родительского блока ограничена свойством overflow: hidden, пользователь видит лишь отдельные сегменты вращающихся скругленных блоков. Благодаря этому создается имитация набегающих волн.

Создаем волны в квадратном блоке

Следуя описанному выше принципу, в html-файле создадим блок для «хранения» с классом «waves». В созданном блоке расположим 2 дочерних блока с классами «wave1» и «wave2»:

<div class="waves">
    <div class="wave1"></div>
    <div class="wave2"></div>
</div>

Теперь откроем CSS файл и добавим стили для фонового блока с классом «waves»: размеры, относительное позиционирование, цвет фона и тень.

.waves {
    width: 160px;
    height: 160px;
    position: relative;
    margin:40px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 20px #a4a4a4;
}

Позже мы вернемся к селектору «.waves», чтобы дополнить список свойств значением overflow: hidden. А пока я предлагаю не сокращать область наблюдения за создаваемыми блоками, чтобы насладиться обзором всех частей анимации.

Приступим к стилизации селекторов «.wave1» и «.wave2»:

1. Увеличим эти блоки относительно фонового до 200% и зададим им абсолютное позиционирование:

.wave1, .wave2{
    position: absolute;
    width: 200%;
    height: 200%;
}

2. Определим расположение блоков. Затем окрасим и закруглим их. После этого каждому блоку зададим анимацию «wave» с разной периодичностью:

.wave1{
    left: -7%; /*определяем положение блока*/
    top: 32%;
    background-color: #a0e9ff; /*окрашиваем блок*/
    border-radius: 45%;  /*закругляем углы*/
    animation: wave 10s linear infinite;  /*добавляем анимацию*/
} 
 .wave2{
    left: -40%;  /*определяем положение блока*/
    top: 56%;
    background-color: #57d0ff;  /*окрашиваем блок*/
    border-radius: 45%;  /*закругляем углы*/
    animation: wave 8s linear infinite; /*добавляем анимацию*/
}

Пришло время добавить динамики нашим блокам! Для этого в CSS-файле мы опишем анимацию «wave» — за одну итерацию анимированный элемент будет поворачиваться на 360 градусов:

@keyframes wave {
    100% {
       transform: rotate(360deg);
    }
}

На этом этапе остановимся и посмотрим в браузере, что получилось:

Это наглядная демонстрация принципа создания эффекта волн в CSS: мы видим, что закругленные блоки действительно способны имитировать движение волн, но только на ограниченной области обзора. Поэтому сейчас самое время вернуться к редактированию селектора «.waves» и добавить CSS-свойство overflow:hidden:

.waves {
    width: 160px;
    height: 160px;
    position: relative;
    margin:40px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 20px #a4a4a4;
    overflow: hidden;
}

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

Создаем волны в круглом вращающемся блоке

Давайте внесем небольшие изменения в наши файлы с кодом и заключим волны не в квадрат, а в круг. Да не в простой, а с вращающимся волнистым бочком! Такой прием эффектно смотрится на темном фоне. Поэтому эксперимента ради закрасим элемент разметки, в котором будет располагаться круглый в темно-синий цвет. Так как под этот эксперимент я выделила целую страницу, то окрашу в темно-синий цвет body:

body {
    background: #044971;
}

Так как в данном примере движутся не только синие волны, но и белый фон, то предлагаю в html-файл добавить дополнительный блок с классом «wave0». Позже мы окрасим этот блок в белый цвет и зададим ему вращение:

<div class="waves">
    <div class="wave0"></div>
    <div class="wave1"></div>
    <div class="wave2"></div>
</div>

Для селекторов «.wave1» и «.wave2» стили останутся прежними. Нужно внести небольшие корректировки в список свойств для селектора «.waves», а также добавить свойства для вновь созданного блока с классом «wave0». Ниже я размещу весь код CSS-файла с внесенными изменениями. В союзе с предоставленным выше html-кодом, этот код будет создавать вращающийся круг с эффектом набегающих волн. Копируйте код и проверяйте работоспособность в браузере!

body {
    background: #172b3c;
}
.waves {
    width: 160px;
    height: 160px;
    position: relative;
    margin:40px;
    border-radius: 300px;
    box-shadow: 0px 0px 20px #0c121b;
    background: #172b3c;
    overflow: hidden;
}
.wave0 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0.5%;
    top: 1%;
    background-color: #fff;
    border-radius: 45%;
    animation: wave 10s linear infinite;
}
.wave1, .wave2 {
    position: absolute;
    width: 200%;
    height: 200%;
}
.wave1 {
    left: -7%;
    top: 32%;
    background-color: #a0e9ff;
    border-radius: 45%;
    animation: wave 10s linear infinite;
}
.wave2 {
    left: -40%;
    top: 56%;
    background-color: #57d0ff;
    border-radius: 45%;
    animation: wave 8s linear infinite;
}
@keyframes wave {
    100% {
       transform: rotate(360deg);
    }
}

Таким образом, описанный выше принцип создания анимации в CSS можно использовать не только для создания эффекта движущихся волн, но и после небольших модификаций преобразовать, например в развевающийся на ветру флаг. Однако, об этом я расскажу в одной из следующих статей.