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

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

Я искал в Интернете, чтобы добавить пользовательские курсоры в мое веб-приложение. Я нахожу много не анимированных (.cur) и анимированных (.ani) курсоров и используя правильный CSS, чтобы у моего приложения были пользовательские курсоры! Кажется, что анимированные курсоры не поддерживаются в веб-браузерах, которые я пробовал, и мне было интересно, есть ли возможность разместить анимированные курсоры в моем веб-приложении.

    Вы можете сделать это с помощью немного 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's 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) }) }); 

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

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

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

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

    Мне удалось выполнить это, используя ключевые кадры 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;} } 

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

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

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

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

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

    Как вы предпочли использовать вместо этого анимированное изображение gif?

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

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

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

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

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

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

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

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

    Interesting Posts

    Устаревший Java HttpClient – насколько это сложно?

    Как вставить выбранные столбцы из файла CSV в базу данных MySQL с помощью LOAD DATA INFILE

    Регистрация с помощью Retrofit 2

    Вызов метода дочерних компонентов от родителя в реакции

    Где находится JAVA_HOME на macOS Sierra (10.12), Эль Капитан (10.11), Йосемити (10.10), Маверикс (10.9), Горный лев (10.8) или Лекс OSX (10.7)?

    Как получить силу сигнала сотовой связи в Android?

    Как я могу использовать индексы строковой развертки в Swift 4?

    Как удалить или отключить кнопку «Простота доступа» на экране входа в Windows 7

    как объединить несколько коллекций с помощью $ lookup mongodb

    Передайте локальный файл в URL в Java

    Защитник Windows: отключить режим реального времени; Следить за расписанием и по требованию

    как установить переменную среды GOPATH на Ubuntu? Какой файл я должен изменить?

    Как уменьшить неизменяемые и непредсказуемые страницы в Linux

    Как измерить время, прошедшее на Java?

    Ошибка авторизации API Google Android v2

    Давайте будем гением компьютера.