Возникла потребность сделать как бы подсветку курсора на кнопках. То-бишь, чтоб когда провожу им по кнопке, то под курсором был какой-то градиент, фон, кружок.. что- не очень важно.
Вопрос вот в чём: как это лучше реализовать? Перемещать что-то на самом фоне кнопки или просто создать прозрачный блок с бекграундом и перемещать уже его?
Ответ
Мы не ищем лёгких путей!
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
Комментариев нет:
Отправить комментарий