Страницы

Поиск по вопросам

вторник, 30 октября 2018 г.

Как лучше сделать подсветку курсора?

Возникла потребность сделать как бы подсветку курсора на кнопках. То-бишь, чтоб когда провожу им по кнопке, то под курсором был какой-то градиент, фон, кружок.. что- не очень важно.
Вопрос вот в чём: как это лучше реализовать? Перемещать что-то на самом фоне кнопки или просто создать прозрачный блок с бекграундом и перемещать уже его?


Ответ

Мы не ищем лёгких путей!
var curBg = document.querySelectorAll('.cur-bg'), mouseBg = document.getElementById('mouse-bg'); for (var i = 0; i < curBg.length; i++) { curBg[i].addEventListener('mousemove', foo, false); curBg[i].addEventListener('mouseleave', boo, false); } function foo(event) { mouseBg.style.display = 'block'; mouseBg.style.left = (event.clientX - 7) + 'px' mouseBg.style.top = (event.clientY - 7) + 'px' } function boo() { mouseBg.style.display = 'none'; } #mouse-bg { width: 15px; height: 15px; border-radius: 8px; background: linear-gradient(270deg, #41bd9d, #d72222); background-size: 400% 400%; display: none; position: absolute; pointer-events: none; -webkit-animation: AnimationName 1s ease infinite; -o-animation: AnimationName 1s ease infinite; animation: AnimationName 1s ease infinite; } @-webkit-keyframes AnimationName { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @-o-keyframes AnimationName { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes AnimationName { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } button


Комментариев нет:

Отправить комментарий