Поддержка анимированных курсоров в веб-приложениях?

Ответ 1

Сделав еще несколько исследований, я не думаю, что это возможно на данный момент. Кажется, что ни один из браузеров не поддерживает анимированные курсоры по состоянию на 2/8/2012, используя свойство CSS cursor. Я предполагаю, что это может быть сделано с использованием JavaScript для многократного изменения значения свойства cursor каждые несколько кадров, чтобы он выглядел анимированным, но это может быть больше проблем, чем того стоит.

Анимированные файлы курсора .ani файлы не работают. Все 5 основных веб-браузеров не будут показывать курсор. Если вы попробуете какой-нибудь CSS, cursor: url('animated.ani'), этот курсор не появится!

Если вы сделаете курсор анимированным gif файлом, он отображается только в некоторых браузерах, и он темпераментный, например cursor: url('animated.gif'), курсор работает в Firefox и Chrome, но он не анимирован, курсор не работает вообще IE9 или Opera, и в версии Safari для Windows это действительно было странно - оно работает, но только анимируется, когда я перемещаю курсор по вертикали на экране и не анимализую, когда курсор не двигается или не двигается горизонтально. Благодарим Brutallus за идею использовать анимированный gif, хотя это не сработало!

Кажется, что браузеры не поддерживают анимированные курсоры в это время, что является позором, потому что я действительно думаю, что это добавит некоторую глубину определенным веб-приложениям. Я не рекомендую использовать анимированные курсоры для большинства веб-сайтов, потому что они очень раздражают, но есть некоторые редкие ситуации, когда они могут быть полезны, например, игра HTML5, в которой курсор может добавить тему игры.

Ответ 2

Вы можете сделать это с помощью некоторого javascript:

Добавить в ваш css

#container {
   cursor   : none;
}

#cursor {
  position  : absolute;
  z-index   : 10000;
  width     : 40px;
  height    : 40px;
  background: transparent url(../images/cursor.gif) 0 0 no-repeat;
}

Затем добавьте в js

Прямая версия Javascript

// Set the offset so the the mouse pointer matches your gif pointer
var cursorOffset = {
   left : -30
 , top  : -20
}

document.getElementById('container').addEventListener("mousemove", function (e) {
  var $cursor = document.getElementById('cursor')

  $cursor.style.left = (e.pageX - cursorOffset.left) + 'px';
  $cursor.style.top = (e.pageY - cursorOffset.top) + 'px';

}, false);

Версия JQuery

$('#container').on("mousemove", function (e) {
  $('#cursor').offset({ 
     left: (e.pageX - cursorOffset.left)
   , top : (e.pageY - cursorOffset.top)
  })

});

Ответ 3

Мне удалось выполнить это, используя ключевые кадры CSS, анимируя исходное изображение курсора. Он работает в Chrome и Safari (хотя он может получить немного глюки, если у вас есть тонна работы). Достаточно хорошо для моего личного сайта!

* {
  cursor: url(frame1.png), auto;
  -webkit-animation: cursor 400ms infinite;
  animation: cursor 400ms infinite;
}

@-webkit-keyframes cursor {
  0% {cursor: url(frame1.png), auto;}
  20% {cursor: url(frame2.png), auto;}
  40% {cursor: url(frame3.png), auto;}
  60% {cursor: url(frame4.png), auto;}
  80% {cursor: url(frame5.png), auto;}
  100% {cursor: url(frame6.png), auto;}
} 

@keyframes cursor {
  0% {cursor: url(frame1.png), auto;}
  20% {cursor: url(frame2.png), auto;}
  40% {cursor: url(frame3.png), auto;}
  60% {cursor: url(frame4.png), auto;}
  80% {cursor: url(frame5.png), auto;}
  100% {cursor: url(frame6.png), auto;}
}

Ответ 4

- > он мерцает по какой-то причине, когда вы перемещаете мышь в направлении вниз

Это происходит потому, что курсор переходит в анимированный gif (поверх изображения #mycursor, просматривает код) и выходит из элемента, на который вы вызываете функцию.

Ответ 5

Чтобы ответить на ваш вопрос

Поддерживает ли веб-браузер анимированные курсоры?

Да. Согласно MDN, IE поддерживает форматы .cur и .ani.

В качестве предположения вы подумали об использовании анимированного gif-изображения?

Попробуйте это в своем CSS

cursor: url(img/animated_cursor.gif), auto;

Я также хотел бы указать, что вы пытались использовать файлы .cur или .ani в IE, и вы не получили ожидаемого результата. Возможно, это проблема с указанным вами курсором в url - this blog поможет вам в этом аспекте.

Ответ 6

Я нашел это и, похоже, работает: http://ye5.blogspot.it/2011/01/animated-mouse-cursor-on-mozilla.html

Ответ 7

Ни один основной браузер не поддерживает анимированные курсоры (типа .ani) с 2017 года, и я не думаю, что они действительно планируют добавить их в будущем. Однако некоторые случайные браузеры могут поддерживать эту функцию (не очень известный браузер), поэтому вам следует добавить функцию, которая заставит курсор работать в этих браузерах:

body {
    cursor: url("hand-pointing.ani"), pointer;
}

Таким образом, если анимированный курсор не работает в пользовательском браузере, по крайней мере обычный курсор указателя включен. Если вы не добавите часть указателя, то браузеры без поддержки анимированных курсоров будут загружать курсор ENTIRELY DIFFERENT из того, что вы хотели. Кроме того, обратите внимание, что курсоры браузера по умолчанию вроде сосут. Я знаю, что многие люди хотят, чтобы поддержка анимированных курсоров была добавлена ​​в основные браузеры, но этого не произойдет, если многие люди не попросят об этом или что-то в этом роде.

Другими словами, сейчас нет ответа на этот вопрос. Прокомментируйте, если это изменится.