Unterstützung von animierten Cursorn in Webanwendungen?

Question

Unterstützen alle Webbrowser animierte Cursor?

Ich habe das Web durchsucht, um benutzerdefinierte Cursor zu meiner Webanwendung hinzuzufügen. Ich habe eine Menge von nicht animierten (.cur) und animierte (.ani) Cursor gefunden, und mit der richtigen CSS, so dass meine Anwendung benutzerdefinierte Cursor hat! Es scheint, dass die animierten Cursor in den Webbrowsern, die ich ausprobiert habe, nicht unterstützt werden, und ich habe mich gefragt, ob es irgendeine Möglichkeit gibt, animierte Cursor in meine Webanwendung zu integrieren.

Answer 1

Ich konnte dies mit CSS-Keyframes erreichen, die das Quellbild des Cursors animieren. Es funktioniert in Chrome und Safari (obwohl es ein wenig störend sein kann, wenn Sie eine Menge Zeug laufen haben). Gut genug für meine persönliche Website!

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

Answer 2

Mit ein wenig Javascript können Sie dies erreichen:

Zu Ihrem css hinzufügen

#container {
   cursor   : none;
}

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

Fügen Sie dann zu Ihrem js

Gerade Javascript-Version

// 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-Version

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

});

Answer 3

Nach weiteren Nachforschungen glaube ich nicht, dass das im Moment möglich ist. Es sieht nicht so aus, als ob irgendeiner der Browser animierte Cursor unterstützt (Stand: 2/8/2012), wenn man das CSS cursor Eigentum. Ich nehme an, man könnte JavaScript verwenden, um den Wert der Eigenschaft cursor Eigenschaft alle paar Frames, um es animiert erscheinen zu lassen, aber das kann mehr Ärger bedeuten, als es wert ist.

Animierte Cursordateien .ani-Dateien funktionieren nicht. In allen 5 gängigen Webbrowsern wird der Cursor nicht angezeigt. Wenn Sie einige CSS wie versuchen, cursor: url('animated.ani') wird der Cursor nicht angezeigt!

Wenn Sie den Cursor in eine animierte Gif-Datei umwandeln, wird er nur in einigen Browsern angezeigt, und er ist launisch, wie cursor: url('animated.gif') Der Cursor funktioniert in Firefox und Chrome, ist aber nicht animiert. Im IE9 und in Opera funktioniert der Cursor überhaupt nicht, und in der Windows-Version von Safari hat er etwas sehr Seltsames getan - er funktioniert, ist aber nur animiert, wenn ich den Cursor vertikal auf dem Bildschirm bewege, und animiert überhaupt nicht, wenn sich der Cursor nicht bewegt oder horizontal bewegt. Vielen Dank an Brutallus für die Idee, ein animiertes Gif zu verwenden, auch wenn es nicht funktioniert hat!

Es scheint, dass die Browser derzeit keine animierten Cursor unterstützen, was schade ist, denn ich denke, dass dies bestimmten Webanwendungen eine gewisse Tiefe verleihen würde. Ich befürworte die Verwendung von animierten Cursorn für die meisten Websites nicht, weil sie extrem lästig sind, aber es gibt einige seltene Situationen, in denen sie nützlich sein können, wie z. B. ein HTML5-Spiel, bei dem der Cursor möglicherweise zum Thema des Spiels beitragen kann.

Answer 4

Um Ihre Frage zu beantworten

Unterstützen alle Webbrowser animierte Cursor?

Ja. Laut MDN Der IE unterstützt die Formate .cur und .ani.

Haben Sie schon einmal darüber nachgedacht, stattdessen ein animiertes Gif-Bild zu verwenden?

Versuchen Sie dies in Ihrem css

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

Answer 5

-->es flackert aus irgendeinem Grund, wenn man die Maus nach unten bewegt

Das passiert, weil der Cursor über das animierte Gif geht (über das #mycursor-Bild, siehe Code) und das Element verlässt, auf dem Sie die Funktion aufrufen.