¿Soporte de cursor animado en aplicaciones web?

¿Hay navegadores web compatibles con cursores animados?

He estado buscando en la web para agregar cursores personalizados a mi aplicación web. He encontrado muchos cursores no animados (.cur) y animados (.ani), y uso el CSS correcto para que mi aplicación tenga cursores personalizados. Parece que los cursores animados no son compatibles con los navegadores web que probé y me preguntaba si hay alguna manera posible de poner cursores animados en mi aplicación web.

Puede hacerlo con la ayuda de un poco de javascript:

Agrega a tu css

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

Luego agrega a tu js

Versión Straight 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); 

Versión de Jquery

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

Después de investigar un poco más, no creo que sea posible en este momento. No parece que ninguno de los navegadores sea compatible con cursores animados a partir del 2/8/2012 utilizando la propiedad del cursor CSS. Supongo que podría hacerse usando JavaScript para cambiar repetidamente el valor de la propiedad del cursor cada pocos cuadros para que parezca animado, pero eso puede ser más problemático de lo que vale.

Archivos de cursor animados. Los archivos .ani no funcionan. Los 5 principales navegadores web no mostrarán el cursor. Si intentas algo como CSS, cursor: url('animated.ani') , ¡ese cursor no aparecerá!

Si convierte el cursor en un archivo gif animado, solo aparece en algunos navegadores y es temperamental, como cursor: url('animated.gif') , el cursor funciona en Firefox y Chrome pero no está animado, el cursor no funciona en IE9 u Opera, e hizo algo realmente extraño en la versión de Windows de Safari; funciona pero solo se anima cuando muevo el cursor verticalmente en la pantalla, y no se animaba cuando el cursor no se movía o se movía horizontalmente Gracias a Brutallus por la idea de usar un archivo .gif animado ¡aunque no funcionó!

No parece que los navegadores sean compatibles con los cursores animados en este momento, lo cual es una lástima, porque realmente creo que agregará algo de profundidad a ciertas aplicaciones web. No defiendo el uso de cursores animados para la mayoría de los sitios web porque son extremadamente molestos, pero hay algunas situaciones excepcionales en las que pueden ser útiles, como un juego HTML5 donde el cursor puede potencialmente agregarse al tema del juego.

Me las arreglé para lograr esto utilizando fotogtwigs clave CSS, animando la imagen de origen del cursor. Funciona en Chrome y Safari (aunque puede tener un pequeño problema si tienes un montón de cosas en ejecución). Lo suficientemente bueno para mi sitio personal!

 * { 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;} } 

-> parpadea por alguna razón cuando mueves el mouse hacia abajo

Sucede porque el cursor pasa por encima del gif animado (sobre la imagen #mycursor, mira el código) y sale del elemento al que llamas la función.

Para responder tu pregunta

¿Hay navegadores web compatibles con cursores animados?

Sí. Según MDN , IE admite formatos .cur y .ani.

Como sugerencia, ¿ha considerado utilizar una imagen animada de GIF en su lugar?

Prueba esto en tu css

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

También me gustaría señalar que, en caso de que hayas intentado utilizar archivos .cur o .ani en IE y no hayas obtenido el resultado que esperabas, tal vez sea un problema con la ruta que proporcionaste en la URL del cursor. Este blog te ayudará. mucho en este aspecto.

Ningún navegador importante realmente admite cursores animados (de tipo .ani) a partir de 2017, y no creo que ninguno realmente esté planeando agregarlos en el futuro. Sin embargo, algunos navegadores aleatorios pueden admitir esta característica (un navegador que no es muy conocido), por lo que debe agregar una función que haga que el cursor funcione en esos navegadores:

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

De esta forma, si el cursor animado no funciona en el navegador de un usuario, al menos el cursor del puntero normal está habilitado. Si no agrega la parte del puntero, los navegadores sin soporte de cursor animado cargarían un cursor TOTALMENTE DIFERENTE de lo que usted quisiera. Además, tenga en cuenta que los cursores de navegador predeterminados tipo de chupar. Sé que muchas personas desean añadir soporte de cursor animado a los principales navegadores, pero no sucederá a menos que muchas personas lo soliciten o algo así.

En otras palabras, no hay respuesta a esta pregunta en este momento. Por favor comente si esto cambia.