Как сделать эффект волны между карточками при наведении мыши

Эффект, когда при наведении мыши между двумя карточками граница превращается в волну, часто используется в современных веб-дизайнах для привлечения внимания. Этот приём основан на комбинации CSS-свойств: псевдоэлементов, анимации и clip-path. В этой статье мы подробно разберём, как реализовать такой визуальный эффект на чистом CSS без JavaScript.

Принцип работы эффекта волны

Основная идея заключается в том, чтобы при наведении курсора на область между двумя карточками (или на одну из них) создать иллюзию волнообразной границы. Это достигается за счёт наложения дополнительного слоя с волнообразным контуром, который анимируется или появляется по триггеру :hover. Ключевые технологии: CSS-псевдоэлементы (::before, ::after), clip-path для создания волны и transition для плавности.

Пошаговая реализация на CSS

1. Базовая разметка HTML

Создадим две карточки внутри контейнера. Важно, чтобы между ними был небольшой отступ, который будет служить областью для эффекта.

<div class="card-container">
  <div class="card">Карточка 1</div>
  <div class="card">Карточка 2</div>
</div>

2. Стилизация контейнера и карточек

Зададим карточкам фиксированную ширину, отступы и фоновый цвет. Контейнер сделаем флекс-контейнером для выравнивания.

.card-container {
  display: flex;
  gap: 20px; /* Расстояние между карточками */
}
.card {
  width: 200px;
  height: 300px;
  background: #f0f0f0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

3. Создание волны с помощью clip-path

Для имитации волны добавим псевдоэлементу волнообразный контур. Используем clip-path: polygon() с несколькими точками, создающими синусоиду.

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%; /* Смещаем за правый край карточки */
  width: 40px;
  height: 100%;
  background: #ff6b6b;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 20% 80%, 40% 90%, 60% 70%, 80% 85%, 100% 60%, 80% 40%, 60% 55%, 40% 35%, 20% 50%, 0% 30%);
  transition: transform 0.3s ease;
  opacity: 0;
}

4. Анимация при наведении

При наведении на контейнер или на каждую карточку будем показывать псевдоэлемент и перемещать его в зону между карточками.

.card-container:hover .card::after {
  opacity: 1;
  transform: translateX(-20px); /* Сдвигаем волну в промежуток */
}

Если нужно, чтобы волна появлялась только при наведении между карточками, можно использовать дополнительный элемент-триггер с абсолютным позиционированием между ними и реагировать на его :hover.

Альтернативный подход с SVG

Для более сложных волн (с плавной анимацией) лучше использовать SVG-фильтры или встроенный SVG-путь. Например, можно задать background-image: url("data:image/svg+xml,...") с волнообразным паттерном и анимировать его через background-position.

Советы по оптимизации и совместимости

• Браузеры: clip-path поддерживается всеми современными браузерами, но для старых версий используйте -webkit-clip-path.
• Производительность: Избегайте анимации свойств, вызывающих перерисовку (layout). Используйте transform и opacity.
• Адаптивность: Размеры волны лучше задавать в vw или %, чтобы эффект работал на мобильных устройствах.

Таким образом, эффект волны между карточками реализуется с помощью CSS-псевдоэлементов и clip-path. Этот метод не требует JavaScript и легко адаптируется под любые макеты. Экспериментируйте с формой волны, цветом и скоростью анимации для достижения уникального визуального стиля.