Сегодня напишем с вами подвижную анимированную карточку. Пример находится в самом начале страницы. Наведите на карточку мышкой и заметите, как она освещается. Если наведете мышку ближе к краям карточки, ее борты станут выделяться.
Для создания карточки перекопируйте следующие части кодов:
<div class="cardHoverAnimation" style="--color: rgb(243, 8, 8);"></div>
.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; }
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'); } });
После копирования вышеупомянутых кусков кода наша карточка готова.
Вы будете получать статьи по нашим направлениям, советы и кейсы предпринимателей
Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.
В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей
Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.
Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.
*Условия акции: получить приз можно после заключения договора и реализации заказанной услуги.