Эффект волны на 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 можно использовать не только для создания эффекта движущихся волн, но и после небольших модификаций преобразовать, например в развевающийся на ветру флаг. Однако, об этом я расскажу в одной из следующих статей.
Спасибо, все ясно и четко👍. Работает!