Jein! Es gibt keine einfache oder standardisierte Methode dafür, aber es ist möglich. Sie können den Cursor mit CSS mit der cursor-Eigenschaft auf verschiedene vordefinierte native Versionen ändern, aber das hilft hier nicht viel. Sie können diese Eigenschaft auch verwenden, um ein statisches Bild als Cursor festzulegen. Aber auch das hilft nicht viel, weil Sie es dort nicht drehen können.
Der Trick besteht darin, den Cursor mit cursor: none; komplett auszublenden und durch ein eigenes Element zu ersetzen.
Hier ist ein Beispiel dafür
Siehe den Pen
Bewege gefälschte Maus mit JavaScript von Chris Coyier (@chriscoyier)
auf CodePen.
Das dreht sich noch nicht. Aber da der Cursor jetzt nur noch ein Element auf der Seite ist, kann die transform: rotate(); von CSS diese Aufgabe problemlos erfüllen. Etwas Mathematik ist erforderlich.
Das überlasse ich Aaron Ikers wirklich unterhaltsamer Demo
Siehe den Pen
Mauszeiger zeigt auf CTA von Aaron Iker (@aaroniker)
auf CodePen.
Ist das ein Barrierefreiheitsproblem? Etwas daran lässt mich denken, dass es eines sein könnte. Es ist eine zusätzliche Bewegung, die man nicht erwartet, und vielleicht etwas desorientierend, wenn ein Element, auf das man sich als Form der Stabilität verlassen könnte, sich anfängt zu bewegen. Das ist wirklich nur etwas, das man für eine begrenzte, neuartige Anwendung tun würde und dabei die prefers-reduced-motion berücksichtigt. Man könnte auch den Originalcursor beibehalten und etwas darunter tun, wie Jackson Callaway es hier getan hat.
Für uns, die wir gerade erst mit der Kunst von CSS beginnen, ist die Möglichkeit, CSS + JS zu mischen, erstaunlich. Ich liebte den Cursor-Trick, ich werde ihn hier testen. Danke
Ich benutze diesen Effekt schon seit Jahren auf meiner Website, Mann :)
Als Proof-of-Concept ist das ziemlich clever, aber ich muss zugeben, dass es mich unglaublich unbehaglich macht, wenn sich der Zeiger auf diese Weise verhält. Er folgt nicht wirklich dem tatsächlichen Verhalten, aber meine unmittelbare Reaktion ist, dass der Zeiger vom Button abgestoßen wird, wie eine Art Scherz.
Und in diesem Sinne (ein Scherz / Prank) glaube ich, dass diese Modifikation wahrscheinlich ziemlich lustig wäre, um sie zu erforschen. Ich tue mich jedoch schwer, ein praktischeres Szenario für diese Art von Cursor-Verhalten zu finden.
Ich muss sagen, ich finde benutzerdefinierte Cursor, die auf diese Weise implementiert sind, immer besonders ruckelig, besonders bei einer Maus mit hoher Empfindlichkeit. Aufgrund der Natur der Implementierung gibt es eine viel höhere wahrgenommene Latenz.
Ich denke aber, dass der CTA ziemlich lustig ist, hat mich zum Schmunzeln gebracht.
Es ist ein schöner Effekt, nicht so desorientierend wie erwartet.
Das ist ein cleverer Trick :) Der einzige Nachteil ist, dass sich der gefälschte Cursor etwas hinter dem echten bewegt, was zu einer unbeholfenen Bewegung führt. Das ist auf meinem Computer ziemlich bemerkbar und störend.
Aus diesem Grund könnte diese Lösung nett zum Anschauen sein, aber ich würde nicht empfehlen, sie zu oft zu verwenden.
Das hat mich aber zum Nachdenken gebracht.
Sie schrieben, dass statische Cursor nicht gedreht werden können. Aber man kann sie dynamisch ändern, also wenn man den Cursor in verschiedenen Winkeln vorrendert und diese Bilder vorlädt (um Blinken zu verhindern), könnte man denselben Effekt erzielen, während man sich immer noch auf den nativen hardwarebeschleunigten Cursor verlässt. Und je nach Bedarf muss man vielleicht nicht einmal die Rotation in jedem Grad vorrendern, nur in jedem 10. Grad.
Ich kann jetzt keine Demo machen, aber ich denke, das könnte funktionieren.