Wenn ich an das Internet Mitte der 2010er-Jahre denke, fällt mir sofort Tumblr ein. Diese magische Onlineplattform ermöglichte es einem damals (und tut dies übrigens auch immer noch), einen personalisierten Blog mit einzigartigen Elementen wie einem HTML-Cursor zu erstellen. Man konnte den Blog selbst programmieren oder aus einer Reihe von Designs auswählen, um seinen Blog so perfekt wie möglich zu gestalten.
Auch wenn die Zeiten der mutig gestalteten (oft extrem bunten) Tumblr-Blogs vorbei sind, haben animierte Cursor immer noch ihren Platz im modernen Internet. Unabhängig davon, ob Sie benutzerdefinierte Formen verwenden oder Animationen zu Klicks hinzufügen, verleihen diese Cursor-Effekte Websites einen ganz eigenen Charme und verbessern das allgemeine Nutzererlebnis.
In den folgenden Abschnitten zeige ich Ihnen verschiedene Cursor-Effekte, mit denen Sie die Attraktivität Ihrer Website verbessern können, und gehe darauf ein, wann Sie animierte Mauszeiger verwenden sollten.
Was ist ein Cursor?
Cursor zeigen an, wo sich die Maus gerade auf einer Website befindet und welche Aktionen eine Person damit ausführen kann.
Wenn Sie beispielsweise den Mauszeiger über ein Tabellenelement bewegen, ändert sich der Cursor möglicherweise in einen Pfeil mit zwei Spitzen, der anzeigt, dass die Größe einer Zeile oder Spalte geändert werden kann. Oder beim Versuch, ein Bild per Drag-and-Drop zu verschieben, ändert sich der Cursor in ein X, was darauf hinweist, dass die Aktion verboten ist.
Cursor können animiert werden, um das Surferlebnis der Websitebesuchenden noch interaktiver zu gestalten. Diese Cursor können ungewöhnliche Formen haben, sich bei Klicks ändern oder zwischen Farben hin- und herwechseln.
Die folgende Website verfügt über einen animierten Cursor und mehrere Optionen, die Sie auf ihrer eigenen Website verwenden können.
Quelle: Screenshot Tumblr
Ein origineller Cursor, wie ein Lutscher, eine Rose oder eine niedliche Katze, kann eine gute Wahl für Ihren persönlichen Blog sein. Allerdings muss nicht jede Website unbedingt mit dieser Art von Cursor versehen werden. Wenn Sie sich allerdings für dieses gewisse Extra entscheiden, muss es zu Ihrer Marke und Ihrem Unternehmen passen.
Im Folgenden finden Sie Beispiele für den Einsatz kreativer Mauszeiger.
Arten von Cursor-Effekten
Benutzerdefinierte Cursor sind eine beliebte Option für das Webdesign – Sie bieten die Möglichkeit, Besuchende zu beeindrucken, die den Standardmauszeiger ihres Betriebssystems erwarten.
Sie werden besonders gern auf kreativen Websites eingesetzt, z. B. auf Portfolios von Agenturen oder Designerinnen bzw. Designern.
Nachfolgend finden Sie ein paar Beispiele für bestehende Websites mit originellen Cursor-Effekten.
1. Wirbel-Cursor-Effekt
Quelle: Screenshot Advanced Team
Advanced Team verwendet einen beeindruckenden Cursor-Effekt, der die Mausbewegungen von Websitebesuchenden wie einen regenbogenfarbenen Wasserstrudel aussehen lässt. Dadurch kann man leichter nachverfolgen, wo man sich auf der Webseite befindet.
Darüber hinaus setzen die bunten Farben einzigartige Akzente in diesem schwarz-weißen Website-Design.
Was mir daran gefällt: Der regenbogenfarbene Wirbel-Cursor bildet einen tollen Kontrast zum schwarzen Hintergrund.
2. Taschenlampen-Cursor-Effekt
Quelle: Screenshot Mooni
Auf der interaktiven Website Paper Play von Moooi scrollen die Nutzenden durch verschiedene „immersive Ebenen“, in denen Produkte vorgestellt werden.
Auf einer Ebene, die den Hintergrund „Dandelion Cranes“ zeigt, hat der Cursor einen Taschenlampeneffekt, damit die Websitebesuchenden verschiedene Elemente auf der Seite beleuchten können.
Als Nutzerin war ich fasziniert von diesem einzigartigen Webdesign. Ich hatte dadurch Lust darauf, mir mehr von der Website anzusehen, und der Taschenlampeneffekt verschaffte mir einen besseren Überblick.
Was mir daran gefällt: Der Taschenlampen-Cursor-Effekt gibt den Websitebesuchenden die volle Kontrolle über ihr Scrollerlebnis.
3. Verzerrter Cursor-Effekt
Quelle: Screenshot Utsubo
Utsobo ist eine der coolsten interaktiven Websites. Wenn ich den Mauszeiger über die Seite bewege, wird der Hintergrund verzerrt – er wird größer und dunkler.
So werde ich quasi dazu eingeladen, „auf der Seite zu zeichnen“, indem ich den Cursor gedrückt halte und hin- und herziehe. Dadurch wird der Cursor vorübergehend angehalten und sieht wie Pinselstriche auf einem Gemälde aus.
Was mir daran gefällt: Der verzerrte Cursor-Effekt schafft ein einzigartiges interaktives Erlebnis, das den Websitebesuchenden das Gefühl gibt, bereits Teil eines kollaborativen Designprozesses zu sein.
4. Punkt-Cursor-Effekt
Quelle: Screenshot Thinkingbox
Thinkingbox verfügt über einen orangefarbenen punktförmigen Mauszeiger mit Schatteneffekt. Dieser wird zu einem weißen Kreis mit einem orangefarbenen Augensymbol, wenn Sie den Mauszeiger über Video-Thumbnails auf der Seite bewegen.
Diese Art von Cursor-Effekt ist eine großartige Möglichkeit, Ihren Websitebesuchenden zu vermitteln, dass es sich um Videos und nicht um Bilder handelt.
Ich persönlich mag die Verwendung eines farbigen Cursors über einer eher neutralen Website. Mein Blick kann ganz einfach nachverfolgen, wo sich meine Maus befindet, was die Navigation reibungslos und intuitiv macht.
Was mir daran gefällt: Dieser Cursor-Effekt hebt Videos subtil von anderen Elementen auf der Seite ab.
5. Schatten-Cursor-Effekt
Quelle: Screenshot Tappezzeria Novecento
Die Website von Tappezzeria Novecento hat einen einzigartigen Cursor, der aus zwei Kreisen besteht: Der eine verhält sich wie der Standard-Mauszeiger, der andere sieht aus wie ein Schatteneffekt, „folgt“ aber dem Cursor, während er sich auf der Seite bewegt.
Durch diesen Effekt wird der Cursor deutlicher sichtbar, so dass ich mich leichter orientieren und auf der mit Inhalten vollgepackten Website bewegen kann.
Was mir daran gefällt: Der Schatten-Cursor-Effekt erleichtert den Lesenden die Navigation auf dieser mutig gestalteten Website, die mit vielen Inhalten gefüllt ist.
6. Text-Cursor-Effekt
Quelle: Screenshot CraieCraie
Auf der Website von CraieCraie ist der Cursor ein schwarzer Punkt, der perfekt auf das Logo abgestimmt ist. Wenn Sie jedoch mit der Maus über ein Portfoliobild fahren, verwandelt sich der schwarze Punkt in einen transparenten Kreis, der ein Wort enthält.
Auf dem Gif oben sehen Sie, dass der Cursor das Wort „découvrir“ enthält, was „entdecken“ oder „aufdecken“ bedeutet. Dies lädt die Websitebesuchenden ein, mehr über dieses spezifische Projekt zu erfahren.
Was mir daran gefällt: Der Text-Cursor-Effekt zeigt den Websitebesuchenden, welche Aktionen sie als Nächstes auf der Website ausführen können.
7. Pfeil-Cursor-Effekt
Quelle: Screenshot Mutt Agency
Mutt Agency verwendet Cursor-Effekte, um die Navigation auf der einzigartigen Portfolio-Website zu erleichtern. Wenn ich zum oberen oder unteren Rand der Seite scrolle, wird der Cursor zu einem Pfeil, der mir zeigt, welchen Bereich ich mir als Nächstes ansehen sollte.
Was mir daran gefällt: Der Pfeil-Cursor-Effekt führt Personen durch die Website und ermutigt sie, weiterzusurfen.
Leitfaden: CSS und HTML für Anfänger
Füllen Sie das Formular aus, um die kostenlosen Leitfaden zu erhalten.
- Was ist HTML?
- Was ist CSS?
- CSS- & HTML-Codes, die Sie kennen sollten
- Was sind beliebte Fehlerquellen?
8. Verschwommener Cursor-Effekt
Quelle: Screenshot Angello Torres
Angello Torres kombiniert „Hover“-Animationen und Cursor-Effekte, um den Websitebesuchenden seinen Grafikdesign-Stil visuell zu vermitteln.
Torres beschreibt sich am Anfang seines digitalen Portfolios als chaotisch und tollkühn. Wenn ich mit der Maus über diese beschreibenden Adjektive fahre, wird das Element unscharf, was die Beschreibung des Künstlers widerspiegelt.
Was mir daran gefällt: Der Unschärfeeffekt ist eine großartige Möglichkeit, die Botschaft des Künstlers visuell darzustellen.
9. Eingeblendeter Cursor-Effekt
Quelle: Screenshot sssolitaire
sssolitaire verwendet einen der Cursor-Effekte, die am meisten herausstechen. Wenn ich zum ersten Mal die Website öffne, ist der Mauszeiger von einem sich drehenden Text umgeben. Dort steht „Klicken und Ziehen“. Wenn ich genau das tue, erscheinen Elemente, die auf dem Design der Spielkarten basieren.
Was mir daran gefällt: Der Einblendeffekt mit dem Cursor ist eine tolle interaktive Möglichkeit, den Websitebesuchenden einen Einblick in das Aussehen des Produkts zu geben.
10. Nachgezogener Cursor-Effekt
Quelle: Screenshot Lisa Says Gah
Lisa Says Gah verwendet einen Trailing-Cursor-Effekt, um die Scrollbewegungen der Websitebesuchenden nachzuverfolgen. Wenn ich die Maus über die Seite bewege, folgt dem Cursor eine Reihe gelber Kreise. Dieses Design erinnert mich ein bisschen an Feenstaub, der über die Seite gestreut wird.
Genau das passt auch zur Marke Lisa Says Gah, die darauf abzielt, der Community die einzigartigen Kreationen unabhängiger Designerinnen und Designer näherzubringen.
Was mir daran gefällt: Der nachgezogene Cursor-Effekt verbessert nicht nur die Navigation, sondern ist auch perfekt auf die Marke abgestimmt.
HTML-Cursor-Codes
Lassen Sie sich von diesen Cursor-Effekten inspirieren, die Sie auf Ihrer Website umsetzen können. Im Folgenden teile ich Beispiele mit Ihnen, die ich auf CodePen gefunden habe. Kopieren Sie den Code einfach und fügen Sie ihn auf ihrer Website ein.
1. Schatten-Cursor
Sehen Sie sich den Pen Animated cursor with Kinet von Georgy Marchuk (@gmrchk) auf CodePen an.
Im obigen Beispiel hat der Standardmauszeiger einen blauen Schatten. Dieser Schatten folgt dem Cursor, wenn er sich bewegt, und wackelt dann wieder an seinen Platz, wenn der Mauszeiger stillsteht.
Was mir daran gefällt: Dieser bunte Cursor hilft mir, auf einer schwarz-weißen Website leicht zu erkennen, wo ich mich befinde.
Beispiele für Anwendungsfälle: Der Ball auf dem Bild ist unterhaltsam, wenn er hin- und herhüpft. Wenn Ihr Unternehmen Produkte verkauft, die kreativ sind oder Kinder ansprechen, kann dies eine originelle Ergänzung Ihrer Website sein. Wenn Punkte ein Teil Ihres Logos sind, kann dieses Layout natürlich auch super passen.
2. Animierter Icon-Cursor beim Darüberbewegen des Mauszeigers
Sehen Sie sich den Pen Animated cursor on :hover von Nharox (@Nharox) auf CodePen an.
In diesem Design wird mir der Standard-Mauszeiger meines Betriebssystems angezeigt – es sei denn, ich fahre mit der Maus über einen der bunten Blöcke. Dann wird der Cursor zuerst als X-Symbol animiert und dann gedreht, bis er zu einem weißen Plus-Symbol in einem Kreis wird.
Was mir daran gefällt: Dieser Cursor hebt klickbare Elemente subtil vom Hintergrund der Webseite ab.
Beispiele für Anwendungsfälle: Der Cursor zeigt deutlich die Bereiche der Website an, die angeklickt werden können, und mit welchen Bereichen nicht interagiert werden kann. Wenn Ihre Website Lernmaterial oder Anleitungen anbietet, kann ein Cursor wie dieser die Navigation intuitiv gestalten.
3. Nachgezogener Cursor
Sehen Sie sich den Pen React Animated Custom Cursor von Stephen Scaff (@StephenScaff) auf CodePen an.
Dieser Cursor kombiniert die beiden obigen Beispiele. Dem Cursor in Form eines roten Punkts folgt beim Bewegen ein halbtransparenter Punkt. Er verwandelt sich jedoch in einen Schatten, wenn der Mauszeiger über einen Link gehalten wird.
Stellen Sie sicher, dass die Farbe Ihres Cursors einen Kontrast zur Hintergrundfarbe Ihrer Website bildet. Wenn Ihre Website einen dunklen Hintergrund hat, sorgen helle Farben für einen größeren Kontrast und sind besser zu erkennen. Wenn Ihre Website einen hellen Hintergrund hat, machen Sie es umgekehrt.
Was mir daran gefällt: Dieser Cursor macht das Scrollen angenehmer und hebt Links von Text ab.
Beispiele für Anwendungsfälle: Dieser übersichtliche Cursor eignet sich hervorragend für jede Website, die für mehr Interaktionen sorgen möchte.
4. Sich vergrößernder Cursor beim Darüberbewegen des Mauszeigers
Sehen Sie sich den Pen Animated Cursor + link hover effect von roeslein (@roesinn) auf CodePen an.
Im obigen CodePen ist der Cursor zunächst ein weißer Kreis. Wenn Sie den Mauszeiger über eines der Wörter bewegen, wird der weiße Kreis erweitert. Der Cursor wird zu einem Handsymbol mit einem weißen Schatten. Vor dem schwarzen Hintergrund der Webseite sieht der Cursor wie ein Scheinwerfer aus.
Achten Sie darauf, dass Ihr Text den richtigen Kontrast für den gewünschten Effekt hat. Im obigen CodePen ist zum Beispiel weißer Text auf weißem Hintergrund zu sehen, der nur erscheint, wenn Sie den Mauszeiger darüber bewegen. Damit können Sie Ihre Websitebesuchenden überraschen. Dieser Effekt funktioniert jedoch nicht auf jeder Website.
Was mir daran gefällt: Mit diesem Cursor-Effekt wird der Text, der die verschiedenen Menüoptionen darstellt, beim Darüberbewegen des Mauszeigers in den Mittelpunkt gerückt.
Beispiele für Anwendungsfälle: Dieser Effekt kann etwas überwältigend sein, wenn Sie eine Website mit vielen Links innerhalb eines Abschnitts haben. Wenn Sie jedoch nur ein paar Links im Text und mehrere in der Navigationsleiste hervorheben möchten, eignet sich dieser Cursor möglicherweise gut für Ihr Projekt.
Wenn Sie wissen möchten, wie Sie diese Art von animiertem Cursor von Grund auf programmieren können, sehen Sie sich das folgende Video von CodeGrid an:
5. Erweiterter Bild-Cursor beim Darüberbewegen des Mauszeigers
Sehen Sie sich den Pen Custom Cursor Effect von Ivan Grozdic (@ig_design) auf CodePen an.
In Ivans Codepen ist der Cursor ein transparenter Kreis, der über die Seite gleitet und sich auf das Element zwischen den abgerundeten Rändern konzentriert. Wenn sich der Mauszeiger bestimmten Wörtern nähert, zeigt der animierte Cursor ein Bild anstelle des Kreises an.
Was mir daran gefällt: Der Cursor-Effekt, der den Mauszeiger in ein Foto verwandelt, wenn er über bestimmten Wörtern pausiert, fällt mir sofort ins Auge und bringt mich dazu, mit diesem spezifischen Inhalt zu interagieren.
Beispiele für Anwendungsfälle: Dieser Effekt funktioniert besonders gut auf Websites, die als Lernplattformen fungieren, z. B. Wörterbücher oder Online-Schulungen. Sie können den Hover-Effekt verwenden, um Informationen wie Bilder und Erklärungen anzuzeigen, die das Verständnis der Websitebesuchenden bestimmter Wörter oder Sätze vertiefen.
6. Blinkender Cursor
Sehen Sie sich den Pen Cursor effekt von Eric Gruby (@ericgruby) auf CodePen an.
Im obigen Code verwendet der Entwickler einen hellgrünen Cursor in Form eines Dreiecks, der blinkt, wenn sich meine Maus über die Webseite bewegt. Wenn die Maus die Navigationsleiste berührt, verschwindet der Cursor, und eine hellgrüne Linie hebt den Bereich der Navigationsleiste hervor, auf dem sich die Maus befindet.
Was mir daran gefällt: Der Übergang vom Cursor zur Zeile in der Navigationsleiste ermöglicht es den Websitebesuchenden, sich auf den Teil der Webseite zu konzentrieren, zu dem sie navigieren möchten.
Pro-Tipp: Ändern Sie die Farbe der Navigationsleiste, wenn Websitebesuchende den Mauszeiger über verschiedene Abschnitte bewegen, um die Wahrscheinlichkeit zu verringern, dass sie die Abschnitte, die sie aufrufen, miteinander verwechseln.
Leitfaden: CSS und HTML für Anfänger
Füllen Sie das Formular aus, um die kostenlosen Leitfaden zu erhalten.
- Was ist HTML?
- Was ist CSS?
- CSS- & HTML-Codes, die Sie kennen sollten
- Was sind beliebte Fehlerquellen?
So erstellen Sie einen animierten Cursor
Sie haben zwei Möglichkeiten, einen animierten Cursor zu erstellen: Sie können entweder einen Editor wie IcoFX verwenden, um einen animierten Cursor für Ihr Betriebssystem zu gestalten, oder ihren eigenen Cursor programmieren und diesen auf Ihrer Website einbetten. Letzteres erfordert HTML, CSS und JavaScript und ist am besten für erfahrene Entwicklerinnen und Entwickler geeignet.
Personen mit weniger Programmiererfahrung zeige ich im folgenden Abschnitt, wie man einen animierten Cursor mit dem IcoFX-Editor erstellen kann.
So erstellen Sie einen animierten Cursor mit IcoFX
Mit IcoFX können Sie sowohl einen benutzerdefinierten Cursor gestalten oder einen der vorinstallierten animierten Cursor individuell anpassen. Im Folgenden beschreibe ich den Prozess zur Erstellung eines benutzerdefinierten Cursors.
1. Zuerst öffne ich den IcoFX-Editor und wähle den Menüpunkt File/New/New Cursor aus, um das Dialogfeld Neuer Cursor aufzurufen.
Quelle: Screenshot IcoFX
2. Dann wähle ich die Farbe und Größe des Cursors, den ich erstellen möchte. Im Anschluss klicke ich auf den Radiobutton Animated Cursor und klicke auf OK.
3. Ich kann dann den Menüpunkt Image/Add new Image verwenden, um mehrere Bilder einzufügen, mit denen ich meinen Cursor animieren kann.
4. Ich kann die Reihenfolge der Grafiken ändern, sie löschen oder sie nach Bedarf duplizieren.
5. Mit dem Menüpunkt Image/Animation/Frame Rate kann ich die Bildrate ändern.
6. Danach gehe ich zum Menüpunkt Image/Cursor/Hot Spot, um den Hot Spot meines Cursors einzustellen.
Quelle: Screenshot IcoFX
7. Mit dem Menüpunkt Image/Cursor/Test Cursor kann ich dann meinen Cursor testen.
Quelle: Screenshot IcoFX
8. Wenn ich fertig bin, speichere ich über den Menüpunkt File/Save meinen Cursor.
So erstellen Sie einen animierten Cursor mit CSS und JavaScript
Wenn Sie lieber ihren eigenen Cursor erstellen möchten, finden Sie hier ein Video von Dev Ed, in dem erklärt wird, wie Sie einen animierten Cursor mit CSS und JavaScript erstellen.
Ziehen Sie eine Cursor-Website in Betracht
Sie müssen nicht erst programmieren lernen, um einen Cursor zu finden, der zu Ihrer Marke passt. Und Sie müssen nicht einmal eine Million Tumblr-Blogs durchstöbern, um einen Code zum Kopieren zu finden. Die drei folgenden Websites bieten eine Auswahl an Cursorn, die Ihrer Website das gewisse Etwas verleihen können.
- How to Creative bietet Cursor-Pakete an, die Sie kaufen können. Dies ist eine großartige Option für diejenigen, die professionelle, einfache Cursor auf ihrer Unternehmenswebseite haben möchten.
- Custom Cursor verfügt über eine Reihe von Cursorn im Clipart-Stil. Wenn Sie etwas Originelles und Ansprechendes entwerfen möchten, insbesondere z. B. für Kinder, schauen Sie zuerst hier vorbei. Bonus: Die Cursor sind kostenlos.
- Sweezy Cursors bietet unterhaltsame Optionen, die von Popkultur, Memes und Cartoons inspiriert sind. Wenn Sie zum Beispiel eine Popkultur-Website betreiben und nach einem passenden Cursor suchen, dann ist diese Plattform genau das Richtige für Sie. Einer meiner Favoriten? Der tanzende Dinosaurier, den man überall auf TikTok sieht.
Quelle: Screenshot Sweezy-Cursors
Programmieren eines animierten Cursors
Nachdem ich nun einige coole Beispiele für animierte Cursor mit Ihnen geteilt habe, zeige ich Ihnen noch, wie ich meinen eigenen programmiert habe.
Schritt 1: Erstellen von HTML-Elementen
Ich musste keine HTML-Elemente verwenden, um meinen Cursor anzupassen. Ich habe mich dafür entschieden, es ganz einfach zu halten und den <p>-Tag in einen <div> namens „Container“ zu verpacken, um grundlegende Anweisungen für mein Beispiel zu schreiben.
Schritt 2: Erstellen des CSS (Cascading Style Sheet)
Ich habe den „body“-Selektor verwendet, um den Standard-Cursor anzuvisieren und seine Eigenschaft auf „Ausblenden“ zu setzen.
Als Nächstes habe ich einen Namen für einen „class“-Selektor erstellt und die Eigenschaften auf den folgenden Wert festgelegt, um den gewünschten Cursor zu erhalten.
Ich wollte einen kreisförmigen Cursor haben, der die Farben wechselt.
Ich habe die position auf fixed gesetzt, um sicherzustellen, dass das Element an Ort und Stelle bleibt, wenn sich Websitebesuchende auf der Seite bewegen. Die Einstellung der Eigenschaften width und height auf 20 px war für mich die perfekte Größe, aber Sie können Ihren Kreis so groß machen, wie Sie möchten.
Gelb ist meine Lieblingsfarbe, daher habe ich sie als background-color verwendet, wenn die Seite geladen wird.
Immer wenn ich die Stapelreihenfolge meiner Elemente steuern möchte, nutze ich die Eigenschaft z-index. Diese Eigenschaft ist am besten geeignet, wenn Sie steuern müssen, wie sich Elemente überlappen.
Ich habe den Wert auf 999 gesetzt, um eine hohe Wahrscheinlichkeit zu erreichen, dass sich alle Elemente auf meiner Webseite überschneiden.
Schritt 3: Erstellen des Javascript-Codes
Zu guter Letzt habe ich eine Funktion erstellt, die einen Event-Listener verwendet, um meinen Cursor zu erstellen, wenn das HTML-Dokument geladen wird. Wenn Sie mit Javascript programmieren, sind Event-Listener eine großartige Möglichkeit, Änderungen entsprechend der Nutzeraktivität auszulösen.
Also entschied ich mich, den „mouse move“-Event-Listener zu verwenden, um die Position des Cursors zu erfassen. Ich habe die aktualisierten Positionswerte in den Variablen cursor.style.left und cursor.style.right gespeichert. Diese Variablen sind wichtig, da sie dem Programm mitteilen, dass die Farbe des Cursors geändert werden muss.
Jetzt muss ich noch die Farben des Cursors so einstellen, dass sie sich abwechseln. Ich habe die Position des Cursors verwendet, um nach dem Zufallsprinzip einen Wert zu generieren, der in der Variable hue gespeichert werden soll. Dadurch ändert sich die Farbe des Cursors dynamisch, wenn die Websitebesuchenden die Maus bewegen.
Es empfiehlt sich, daran zu denken, dass der Farbkreis in Gradzahlen von 0 bis 360 dargestellt werden kann. Ich habe mir dies zunutze gemacht und die Funktion „hsl“ verwendet, damit der Farbtonwert zufällige Farben für meinen benutzerdefinierten Cursor erzeugt.
Schritt 4: Sehen Sie sich Ihre Ergebnisse an
Und hier ist das Ergebnis:
Animieren des Cursors
Ganz gleich, ob Sie den Cursor Ihres Betriebssystems oder Ihrer Website animieren möchten, dieser Designtrend kann dazu beitragen, Ihren Computer und Ihre Website zu personalisieren. Lassen Sie sich von den oben genannten Websites inspirieren und laden Sie dann den Code von CodePen herunter oder erstellen Sie einen eigenen Code von Grund auf neu.
Titelbild: HubSpot
