Добавление своих курсоров на сайт html css

Question

Можно ли в браузере отображать свои анимированные курсоры? формата .ani ? Например используя .png или .cur все работает отлично, при указании .ani курсор вообще не изменяется. Конвертировал .ani в .gif, работает но не во всех браузерах и просто картинкой, без анимации. Как можно вообще использовать анимированные курсоры?

Answer 1

Как вариант, курсор можно эмулировать самому, с какими угодно размерами и картинками:

(но может быть заметен лаг, потому что в отличие от элементов системный курсор движется независимо от отрисовки кадров браузером)

const cursor = document.querySelector('.cursor');

document.addEventListener( 'mouseenter', event => {
  cursor.style.display = 'block';
});

document.addEventListener( 'mouseleave', event => {
  cursor.style.display = 'none';
});

document.addEventListener( 'mousemove', event => {
  cursor.style.transform = `translate(${event.pageX}px, ${event.pageY}px)`;
});

html {
  cursor: none;
}

.cursor {
  display: none;
  width: 32px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000000;
  pointer-events: none;
  background: url(https://i.stack.imgur.com/7o9RS.gif) no-repeat;
}

<div class="cursor"></div>

БЛОГ НА HUSL

Добавление своих курсоров на сайт html css

Ответы (1 шт):