Animowany kursor CSS

Animacja jest czymś, w czym obiekt pojawia się jako ruchomy obiekt. W CSS możemy powiedzieć, że kursor jest animowanym kursorem, gdy animuje przejście z jednej konfiguracji CSS do drugiej. Kiedy kursor zmienia swój styl z jednego stylu na drugi, możemy ustalić, że kursor jest animowany. Możemy również użyć różnych kolorów dla animowanego kursora, aby kursor zmienia jego kolor z czasem. Możemy uczynić naszą stronę internetową lub projektami bardziej atrakcyjnymi przy użyciu animowanego kursora. Przyciąga do niego użytkownika. Ten przewodnik omówi, jak zrobić animowany kursor w CSS. W tym celu musimy użyć kodu HTML i JavaScript. Zaprojektujemy tutaj kilka animowanych kursorów za pomocą HTML, CSS i JavaScript.

Przykład 1

Aby utworzyć animowany kursor, w tym kodzie używamy HTML, CSS i JavaScript. Najpierw musimy wykonać plik HTML w kodzie Visual Studio. Możesz użyć dowolnego edytora swojego wyboru. Tutaj używamy kodu Visual Studio. Wybieramy język kodu HTML jako „HTML”. A następnie napisz kod tutaj. W tym przykładzie podajemy również kod animowanego kursora. Możesz użyć tego kodu do tworzenia animowanego kursora. Teraz zacznij od kodu HTML.

Tworzymy klasę „Kursor” i klasę „sekcji” o nazwie „Main” wewnątrz „Div”. Następnie tworzymy następujące nagłówek, nasz nagłówek 1 i zamykamy znacznik „sekcji” tutaj. Następnie używamy „JavaScript” w tym pliku „HTML”. Używamy znacznika „skryptu” i w jego typu podajemy nazwę „JavaScript”, który jest „tekstem/javascript”. Dzięki temu definiujemy kursor „const” i używamy „zapytania. selektor". Zapytanie. Selektor ”służy do zwracania elementu„ Dokument ”, który będzie pasował do selektora, a ten selektor to„ kursor ”.

Teraz używamy „var” i nazwaliśmy go „limit czasu”. Potem pojawia się metoda „addeventlisner”. Połączy obsługę zdarzeń do elementu, który określamy tutaj. Wydarzeniem tutaj jest „Mousemove”, który dołącza do elementu „Dokument”. Używamy „Let”, aby zadeklarować zmienną „x” i zainicjować ją za pomocą „E.pagex ”. Właściwość „Pagex” zwróci poziomy osi kursora po uruchomieniu zdarzenia kursora. A zmienna „Y” z tym samym typem danych „niech” zainicjuj ten „y” za pomocą „E.Pagey ”. Właściwość „Pagey” zwróci oś kursora po uruchomieniu zdarzenia kursora. Ustaw także „Kursor. styl „do„ top ”,„ lewy ”i„ wyświetlacz ”.

Następnie używamy „funkcji MousEstopped”, więc kiedy ta funkcja wywołuje, wyświetli „Brak”. Następnie używamy funkcji „Wyczyść limit czasu” i przekazujemy „limit czasu” jako parametr i ustawiamy ten „limit czasu” poniżej. Ponownie używamy „AddeveNetLisner” i zamykamy tag „Script” tutaj. Chodzi o „htmlhtml” i „JavaScript”. Teraz będziemy używać CSS do stylizacji.

Kod CSS

W CSS importujemy „URL” i używamy selektora „*”, który służy do wyboru wszystkich elementów. Ustawiamy „margines” i „wyściółka” wewnątrz selektora „*” na „0”. „Rozmiar rozmiaru”, który tutaj ustawiamy, to „Border-Box”, który służy do określenia zachowania „szerokości” i „wysokości” oraz wybierania „rodziny czcionki”. Następnie używamy „ciała” i ustawiamy wysokość na „100 VH”. „Tło” jest „czarne” i ustawia „kursor” na „Brak”.

Teraz stylujemy „główny”, a jego wysokość jest ustalona jako „100 VH”. Używamy wyświetlacza „Flex” i „uzasadnienia” do „środka”, a także „wyrównania” do „Centrum”. Zastosuj kolor „biały” do „H1” i użyj „0.8 ”wartość alfa dla tego. Ustawiamy „rozmiar czcionki” tego nagłówka na „65px”. Teraz ustaw „z-index” „kursora” jako „999”. „Pozycja” jest „naprawiona” i ustawiona jako „tło”. „Szerokość” i „wysokość” to „20px”, a „Radiusz graniczny” to „50%”. „Wskaźnik wskaźnika” to „Brak”. „Skok” doda jeden lub więcej cieni wokół ramki elementów. Ustawiliśmy „H-offset”, który jest przesunięciem poziomym, na „0” i „V-przesunięcie”, który jest pionowym przesunięciem, na „0”, a „Blur” to „20px” i „” niebieski". Ta sama „H-Offset” i „V-A -inkset” znajdują się w następnych dwóch wierszach, ale wartość „rozmycia” zmienia się w każdym z nich jako „60px” i „100px”.

Używamy animacji dla „5s” i właściwości „Transform: Tłumacz” tutaj. Ustaw także „wyświetlacz” na „Brak”. Teraz do animacji używane są klatki kluczowe. Ponadto używamy tutaj selektora „przed” i ustawiamy wcześniej „treść”. Ustaw „pozycję” na „Absolute” i „Tło” na „niebieski”. „Szerokość” i „wysokość” to „50px”. „Krycie”, którego używamy, to „0.2 ”, a właściwość„ Transform-Translation ”jest tutaj. „Radiusz graniczny” to „50%”.

Wyjście

Video gracze.com/wp-content/uploads/2022/06/cursor_animation_on_mousemove_mouseout_mousestopped_profile_1.MP400: 0000: 0000: 09 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.

Przykład nr 2

W tym przykładzie tworzymy zewnętrzny plik JavaScript i łączymy ten plik do naszego pliku HTML i łączymy plik CSS.

Tworzymy w tym jedną klasę „główną” o nazwie „BG_CANVAS”. Mamy „nagłówek” klasy „Div”. Tworzymy nagłówek w tym „div”. Druga nazwa Div to „Kursor”, a po drugim „Div” zamykamy „główny” i łączymy plik JavaScript tutaj. Umieściliśmy nazwę pliku JavaScript „AnimatedMouse.js ”i zamknął znacznik„ skryptu ”.

Kod CSS

Ustawiamy „root”, który wybiera elementy główne w HTML i ustawia kolor „czarny”, kolor „niebieski” i „biały” w formie „RGB” i „zielony” w „RGB”. Następnie używamy selektora „*”, który wybiera wszystkie elementy, i wykonujemy tutaj styl, który będzie miał zastosowanie do wszystkich „elementów”. Po prostu ustawiamy tutaj „Margin” i „Padding” na „0”.

Następnie stylizujemy „nagłówek”. „Szerokość” i „wysokość” nagłówka to odpowiednio „100%” i ​​„300px”. „Rozmiar” jest „skrzyżką graniczną”, a „wyświetlacz” to „Flex”. „Justify-Content” i „Align-Item” w „Centrum”. Stylukujemy również „kursor” i ustawiamy „szerokość” i „wysokość” jako „20px”. Ustawiliśmy również „granicę” na szerokość „10px” typu „stałego” i ustawiamy kolor granicy. „Czas trwania przejścia”, którego używamy, to „200 ms”. Używamy „Animacji” i animowujemy kursora dla „550”. Następnie używamy selektora „After” z „kursorem” i ustawiamy treść. Ustawiamy również „szerokość” i „wysokość” jako „40px”, „granicę” jako „15px” w typu „solidnym”, „promieniu granicznym” jako „50%” i ​​„absolutnym” w „pozycji”. „TOP” i „Left” są ustawione jako „-25px” dla każdego, a następnie używają właściwości „Animation”. Teraz pojawia się „nagłówek” i styl. Ustawiliśmy jego „rodzinę czcionki”, a „waga” tej czcionki to „300”. Wyrównujemy go w „Centrum”, a „Font-size” to „60px”. „Kolor” jest „czarny” dla czcionki. Teraz stylizujemy „BG_CANVAS”, która jest nazwą klasy „Main”. Jego „szerokość” to „100%”, a „wysokość” to „100 VH” i ustawia „kolor tła” i „rozmiar pola”.

Następnie używamy „Cursor-Expand” i właściwości „Animation”. Ustawiliśmy również „granicę”. Następnie używamy selektora „After” z tym „kursorem-expand” i ustawiamy „granicę”. Następnie używamy tutaj „klamek kluczowych”, których używamy do animacji, i używamy skali transformacji „od” transformacji (1) „do” (1.5) i to samo w następujących wierszach:

Kod JavaScript

Na poniższym obrazie jest to kod JavaScript. I ten kod jest taki sam jak poprzedni kod JavaScript, który wyjaśniliśmy w naszym pierwszym przykładzie. Zapisujemy plik JavaScript za pomocą „.rozszerzenie pliku JS ”i musi połączyć ten plik z naszym plik HTML.

Wyjście

Video gracze.com/WP-Content/uploads/2022/06/Animated-Cursor-in-CSS-profile-1-Microsoft_Edge-2022-06-03-03-07-03.MP400: 0000: 0000: 09 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.

Wniosek

W tym przewodniku omówiliśmy animowany kursor w CSS. Napisaliśmy ten artykuł, aby wyjaśnić, jak sprawić, by Twój kursor był animowanym kursorem za pomocą CSS. Użyliśmy różnych właściwości w CSS i użyliśmy kodu HTML i JavaScript i połączyliśmy te pliki do tworzenia animowanego kursora. Zbadaliśmy dwa różne przykłady, aby stworzyć animowany kursor różnych stylów. Mam nadzieję, że po przeczytaniu tego artykułu stworzysz animowany kursor na swoich stronach, aby Twoja witryna była bardziej atrakcyjna.