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

Owebs

8 декабря

121

Время чтения: 2 минуты

Оглавление

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

Как сделать подвижную анимированную карточку

Как сделать подвижную анимированную карточку

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

Для создания карточки перекопируйте следующие части кодов:

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;
                }

JS:

                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');
        
                    }
        
                });

После копирования вышеупомянутых кусков кода наша карточка готова.