Animierter Cursor CSS

Animation ist etwas, in dem das Objekt als sich bewegendes Objekt erscheint. In CSS können wir sagen, dass der Cursor ein animierter Cursor ist, wenn er den Übergang von einer CSS -Konfiguration zu einer anderen animiert. Wenn der Cursor seinen Stil von einem Stil zum anderen ändert, können wir feststellen, dass der Cursor animiert ist. Wir können auch verschiedene Farben für den animierten Cursor verwenden, sodass der Cursor seine Farbe mit der Zeit ändert. Wir können unsere Website oder Projekte mit dem animierten Cursor attraktiver machen. Es zieht den Benutzer dazu an. In diesem Leitfaden wird erläutert, wie der animierte Cursor in CSS erstellt wird. Dafür müssen wir einen HTML- und JavaScript -Code verwenden. Wir werden hier einige animierte Cursoren mit HTML, CSS und JavaScript entwerfen.

Beispiel 1

Um den animierten Cursor zu erstellen, verwenden wir HTML, CSS und JavaScript in diesem Code. Zunächst müssen wir die HTML -Datei im Visual Studio -Code erstellen. Sie können jeden Redakteur Ihrer Wahl verwenden. Hier verwenden wir Visual Studio Code. Wir wählen die Sprache für den HTML -Code als "HTML" aus. Und dann den Code hier schreiben. In diesem Beispiel stellen wir auch den Code für den animierten Cursor an. Sie können diesen Code verwenden, um den animierten Cursor zu erstellen. Beginnen Sie jetzt mit dem HTML -Code.

Wir erstellen die "DIV" -Klasse "Cursor" und eine "Abschnittsklasse" mit dem Namen "Main" im "Div". Dann erstellen wir die folgende Überschrift, unsere Überschrift 1, und schließen hier das "Abschnitt" -Tag hier. Als nächstes verwenden wir "JavaScript" in dieser "HTML" -Datei. Wir verwenden das "Skript" -Tag und geben in seinem Typ den Namen des "JavaScript" an, das "Text/JavaScript" ist. Damit definieren wir den "const" Cursor und verwenden die Abfrage "Abfrage". Wähler". Die Abfrage. Selector ”wird zur Rückgabe des Elements„ Dokument “verwendet, das mit dem Selektor übereinstimmt, und dieser Selektor ist" Cursor ".

Jetzt verwenden wir "var" und nannten es "Timeout". Dann kommt die Methode "AddEventlisner". Es wird einem Ereignishandler dem hier angegebenen Element angehängt. Das Ereignis hier ist das „Mousemove“, das sich an das "Dokument" -Element anschließt. Wir verwenden "let", um eine variable "x" zu deklarieren und sie mit "e" initialisieren.Pagex ”. Die Eigenschaft „Pagex“ gibt die horizontale Achse des Cursors zurück, wenn das Cursorereignis ausgelöst wird. Und die "y" -Variable mit dem gleichen "let" -Datentyp, initialisieren Sie dieses "Y" mit "e".pagey ”. Die Eigenschaft „Seiten“ gibt die vertikale Achse des Cursors zurück, wenn das Cursorereignis ausgelöst wird. Stellen Sie auch den Cursor ein. Stil "zu" Top "," links "und" Display ".

Danach verwenden wir die "Funktion musestopped". Wenn diese Funktion aufruft, wird "keine" angezeigt, die "keine" angezeigt werden, wenn diese Funktion aufruft. Anschließend verwenden wir die Funktion "Timeout löschen" und übergeben "Timeout" als Parameter und setzen dieses "Timeout" unten fest. Wir verwenden erneut "AddevenetLisner" und schließen hier das "Skript" -Tag hier. In diesem Fall geht es um "htmlhtml" und "JavaScript". Jetzt werden wir CSS zum Styling verwenden.

CSS -Code

In der CSS importieren wir die "URL" und verwenden den "*" -Sähler, der zur Auswahl aller Elemente verwendet wird. Wir setzen den „Rand“ und die „Polsterung“ in den "*" -Schulektor auf "0". Das hier festgelegte „Box-Größe“ ist „Border-Box“, das zum Angeben des Verhaltens der „Breite“ und der „Höhe“ und zur Auswahl der „Schriftfamilie“ verwendet wird. Dann verwenden wir "Körper" und setzen die Höhe auf "100VH". Der "Hintergrund" ist "schwarz" und setzt den "Cursor" auf "keine".

Jetzt stylen wir das „Haupt“ und seine Größe wird als „100VH“ eingestellt. Wir verwenden das "Flex" -Display und "Justify-Incontent" zum "Zentrum", auch "ausrichten" auf das „Zentrum“. Tragen Sie die „weiße“ Farbe auf den „H1“ an und verwenden Sie die „0.8 ”Alpha -Wert dafür. Wir setzen die „Schriftgröße“ dieses Übergangs auf „65px“. Stellen Sie nun den "Z-Index" des "Cursors" als "999" fest. Die "Position" dafür ist "fix" und als "Hintergrund" festgelegt. Die "Breite" und "Höhe" sind beide "20px", und der "Grenzradius" beträgt "50%". Der "Zeiger-Event" ist "keine". Das "Box-Shadow" fügt einen oder mehrere Schatten um den Elementrahmen hinzu. Wir setzen den "H-Offset", das horizontale Versatz, auf "0", und das "V-Offset", das vertikale Offset ist, auf "0" und die "Unschärfe" "20px" und "ist" Blau". Das gleiche "H-Offset" und "V-Offset" befinden sich in den nächsten beiden Zeilen, aber der Wert "Unschärfe" ändert sich jeweils als "60px" und "100px".

Wir verwenden Animation für "5S" und die Eigenschaft "Transform: Translate" hier. Stellen Sie außerdem seine "Anzeige" auf "None" ein. Jetzt werden Keyframes für die Animation verwendet. Außerdem verwenden wir hier den "Vorher" -Auskyloctor und stellen den "Inhalt" vor diesem fest. Stellen Sie die "Position" auf "Absolute" und "Hintergrund" auf "Blau" ein. Die „Breite“ und „Höhe“ sind „50px“. Die „Deckkraft“, die wir verwenden, lautet „0.2 ”, und die Eigenschaft„ Transform-Translate “ist hier. Der "Grenzradius" beträgt "50%".

Ausgang

Video Playerhttps: // LinuxHint.com/wp-content/uploads/2022/06/cursor_animation_on_mousemove_mouseout_mousestopped_profile_1.MP400: 0000: 0000: 09use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.

Beispiel # 2

In diesem Beispiel erstellen wir die externe JavaScript -Datei und verknüpfen diese Datei mit unserer HTML -Datei und verknüpfen die CSS -Datei.

Wir erstellen eine "Haupt" -Klasse mit dem Namen "BG_CANVAS". Wir haben eine "Div" -Klasse "Header". Wir erstellen die Überschrift in diesem „Div“. Der andere Div -Name ist "Cursor", und nach dem zweiten "Div" schließen wir die "Haupt" und verknüpfen die JavaScript -Datei hier. Wir haben den Namen der JavaScript -Datei „AnimatedMouse“ platziert.JS “und schloss das" Skript "-Tag.

CSS -Code

Wir setzen die "root", die die Root -Elemente in der HTML auswählt und die Farbe "schwarz", "blau" und "weiß" Farbe in "RGB" -Form und "grün" in "RGB" festlegt. Anschließend verwenden wir den "*" Selektor, der alle Elemente auswählt, und wir machen hier einige Styling, die für alle „Elemente“ gelten,. Wir haben hier einfach "Margin" und "Polster" auf "0" festgelegt.

Dann stylen wir den „Header“. Die „Breite“ und „Höhe“ des Headers beträgt „100%“ bzw. „300px“. Die "Box-Größe" ist "Border-Box", und das "Display" ist "Flex". Wir „rechtfertigen“ und „Ausrichtung“ im „Zentrum“. Wir stylen auch den „Cursor“ und setzen die „Breite“ und „Höhe“ jeweils als „20px“. Wir setzen auch die „Grenze“ auf „10px“ Breite des „festen“ Typs und setzen die Farbe des Randes. Die "Übergangsdauer", die wir verwenden, lautet "200 ms". Wir verwenden "Animation" und animieren den Cursor für "550S". Dann verwenden wir den "After" -Sähler mit dem "Cursor" und setzen den Inhalt fest. Wir setzen auch "Breite" und "Höhe" als "40px", "Grenze" als "15px" im "soliden" Typ "Border-Radius" als "50%" und "absolut" in "Position". Das "Top" und "Links" wird für jeden als "-25px" eingestellt und verwenden dann die Eigenschaft "Animation". Jetzt kommt der „Header-Title“ und der Stil. Wir haben seine „Schriftfamilie“ festgelegt, und das „Gewicht“ dieser Schriftart beträgt „300“. Wir richten es im „Zentrum“ aus, und „Schriftgröße“ ist „60px“. Die „Farbe“ ist für die Schriftart „schwarz“. Jetzt werden wir "bg_canvas" stylen, was der Name der Klasse "Haupt" ist. Die „Breite“ beträgt "100%" und "Höhe" "100VH" und setzt seine "Hintergrundfarbe" und "Boxgröße".

Danach verwenden wir "Cursor-Expand" und die Eigenschaft "Animation". Wir setzen auch die „Grenze“ dafür. Dann verwenden wir den "After" -Sähler mit diesem "Cursor-Expand" und setzen seine "Grenze". Dann verwenden wir hier die "Keyframes", die wir für die Animation verwenden, und verwenden die "From" -Transformationskala (1) "to" Transformationskala (1.5) und dasselbe in den folgenden Zeilen:

JavaScript -Code

Im folgenden Bild ist dies der JavaScript -Code. Und dieser Code ist der gleiche wie der vorherige JavaScript -Code, den wir in unserem ersten Beispiel erklärt haben. Wir speichern die JavaScript -Datei mit der “.JS ”Dateierweiterung und muss diese Datei mit unserer HTML -Datei verknüpfen.

Ausgang

Video Playerhttps: // LinuxHint.com/wp-content/uploads/2022/06/Animations-Cursor-in-CSS-Profil-1-microsoft_-Edge-2022-06-03-11-07-03.MP400: 0000: 0000: 09use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.

Abschluss

In diesem Leitfaden haben wir den animierten Cursor in CSS besprochen. Wir haben diesen Artikel geschrieben, um zu erklären, wie Sie Ihren Cursor mit CSS zu einem animierten Cursor machen können. Wir haben verschiedene Eigenschaften in CSS verwendet und den HTML- und JavaScript -Code verwendet und diese Dateien für den animierten Cursor verknüpft. Wir haben zwei verschiedene Beispiele untersucht, um den animierten Cursor verschiedener Stile zu machen. Ich hoffe, dass Sie nach dem Lesen dieses Artikels den animierten Cursor auf Ihren Websites machen, um Ihre Website attraktiver zu machen.