Фоновая анимация волн
Начальное состояние: базовые стили для html и body, сбрасывающие отступы. Стили для section, задающие положение, размеры и фон. Заголовок h1 расположен на 20% сверху и имеет базовые стили.
Задаём элементам .wave абсолютное позиционирование, располагаем их в контейнере внизу и слева. Добавляем временную обводку.
Устанавливаем ширину .wave на 100%, чтобы он занимал всю ширину экрана.
Устанавливаем высоту .wave на 20vh, чтобы он занимал 20% от высоты окна браузера.
Добавляем фоновое изображение для .wave с помощью свойства background. Фоновое изображение — это изображение волны (wave.png).
Настраиваем размер фонового изображения с помощью background-size, чтобы изображение заполнило всю ширину окна 100vw и высоту 20vh.
Добавляем первой волне класс .wave1. Он позиционируется внизу и накладывается на другие волны благодаря z-index: 15.
Добавляем для .wave1 прозрачность 0.9, чтобы сделать её слегка прозрачной. Это поможет создать эффект наложения нескольких волн друг на друга.
Добавляем анимацию для .wave1. Она будет плавно двигаться в течение 20 секунд с бесконечным циклом и задержкой начала анимации в 0 секунд.
Добавляем описание анимации @keyframes animate. Анимация меняет позицию фона по горизонтали от 0 до 100vw, создавая движение волны.
Добавляем в разметку вторую волну .wave2 и задаём для неё стили. Она будет находиться под первой волной из-за z-index: 10 и смещена вверх из-за bottom: 10px.
Задаём для .wave2 свойство opacity и параметры анимации. Это создаст эффект движения для второй волны.
Добавляем новый ключевой кадр animate2 для создания анимации движения второй волны в противоположном направлении.
Добавляем в разметку третью волну и задаём для неё стили. Располагаем её под первыми двумя волнами, по вертикали смещаем ещё выше, делаем её ещё прозрачнее. Анимация движения будет в том же направлении, что и у первой волны, но с другой задержкой.
Добавляем в разметку четвёртую волну и задаём ей стили. Эффект анимированного фона с волнами готов.
Экспериментируйте с кодом, меняйте параметры анимации, добавляйте больше волн и делитесь результатом с друзьями.
