Подвижная анимированная карточка на JS и CSS

Owebs

8 декабря

578

Время чтения: 5 минут

Оглавление

Развернуть Свернуть

Как использовать: скопируйте код
Как работает эффект
Как кастомизировать

Сегодня мы с вами создадим стильную анимированную карточку, которая реагирует на движение мыши. При наведении на карточку появляется мягкое свечение, которое следует за курсором. А если подвести мышь ближе к краям — борты карточки подсвечиваются, создавая эффект глубины и объёма. Всё это работает с помощью CSS и небольшого JavaScript. Пример — прямо ниже.

Эффект построен на радиальном градиенте, который перемещается за курсором. При этом карточка остаётся отзывчивой, плавной и работает даже на мобильных устройствах при касании (с адаптацией под touch-события).

Как использовать: скопируйте код

Для создания такой карточки вам понадобится три части: HTML, CSS и JavaScript. Просто вставьте их в свой проект — и всё заработает.

HTML

<div class="cardHoverAnimation" style="--color: rgb(243, 8, 8);"></div>

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

CSS

.cardHoverAnimation {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: 400px;
    background-color: rgb(150, 7, 7);
    border-radius: 20px;
    overflow: hidden;
}

.cardHoverAnimation::before {
    content: '';
    position: absolute;
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%);
    background: radial-gradient(var(--color), transparent, transparent);
    width: 500px;
    height: 500px;
    opacity: 0;
    transition: 0.3s linear, top 0s, left 0s;
}

.cardHoverAnimation:hover::before {
    opacity: 1;
}

.cardHoverAnimation::after {
    content: '';
    position: absolute;
    inset: 2px;
    background-color: rgba(110, 4, 0, 0.75);
    border-radius: 20px;
}

JavaScript

let allCards = document.querySelectorAll('.cardHoverAnimation');

allCards.forEach(card => {
    card.onmousemove = function (e) {
        let x = e.pageX - card.offsetLeft;
        let y = e.pageY - card.offsetTop;

        card.style.setProperty('--x', x + 'px');
        card.style.setProperty('--y', y + 'px');
    }
});

После вставки всех трёх частей — карточка готова к использованию. Никаких библиотек не требуется.

Как работает эффект

::before — создаёт большое пятно радиального градиента, которое следует за курсором.
Переменные --x и --y обновляются через JavaScript при движении мыши.
::after — полупрозрачный слой, который создаёт «внутреннюю тень» и делает свечение более реалистичным.
Плавность обеспечивается через transition и transform: translate(-50%, -50%).

Как кастомизировать

Цвет свечения: измените --color: rgb(243, 8, 8) в инлайн-стиле.
Фон карточки: поменяйте background-color в CSS.
Размер: настройте max-width и height.
Скругление: измените border-radius.
Содержимое: добавьте внутрь <h3>, <p>, <img> — всё будет под слоем свечения.

Готово! Теперь у вас есть современная, интерактивная карточка с эффектом подсветки. Используйте в лендингах, портфолио, каталогах — везде, где нужно привлечь внимание.

Поделиться статьей:

Owebs