Animert markør CSS

Animasjon er noe som objektet fremstår som et bevegelig objekt. I CSS kan vi si at markøren er en animert markør når den animerer overgangen fra en CSS -konfigurasjon til en annen. Når markøren endrer stil fra den ene stilen til den andre, kan vi bestemme at markøren er animert. Vi kan også bruke forskjellige farger for den animerte markøren, så markøren endrer fargen med tiden. Vi kan gjøre nettstedet eller prosjektene våre mer attraktive ved hjelp av den animerte markøren. Det tiltrekker brukeren mot det. Denne guiden vil diskutere hvordan du lager den animerte markøren i CSS. For dette må vi bruke noen HTML- og JavaScript -kode. Vi vil designe noen animerte markører her ved hjelp av HTML, CSS og JavaScript.

Eksempel 1

For å lage den animerte markøren bruker vi HTML, CSS og JavaScript i denne koden. Først må vi lage HTML -filen i Visual Studio Code. Du kan bruke hvilken som helst redaktør etter eget valg. Her bruker vi Visual Studio Code. Vi velger språket for HTML -koden som "HTML". Og skriv deretter koden her. Vi gir også koden for den animerte markøren i dette eksemplet. Du kan bruke denne koden for å lage den animerte markøren. Nå, kom i gang med HTML -koden.

Vi oppretter "Div" -klassen "Markør" og en "seksjon" -klasse som heter "Main" i "Div". Deretter oppretter vi følgende overskrift, overskriften 1, og lukker "seksjonen" -merket her. Deretter bruker vi “JavaScript” i denne “HTML” -filen. Vi bruker "Script" -merket, og i sin type gir vi navnet på "JavaScript", som er "Text/JavaScript". Med dette definerer vi "const" -markøren og bruker "spørringen. velger ”. "Spørringen. Selector ”brukes til å returnere elementet,“ Dokument ”, som samsvarer med velgeren, og denne velgeren er“ Markør ”.

Nå bruker vi “var” og kalte det “timeout”. Så kommer "AddEventLisner" -metoden. Den vil knytte en hendelsesbehandler til elementet som vi spesifiserer her. Arrangementet her er "Mousemove", som knytter seg til "dokumentet" -elementet. Vi bruker "la" for å erklære en variabel "x" og initialisere den med "e.sidex ”. Egenskapen "Pagex" vil returnere markørens horisontale akse når markørhendelsen utløses. Og "y" -variabelen med den samme "la" datatypen, initialiser denne "y" med "e.sidey ”. Egenskapen "Pagey" vil returnere markørens vertikale akse når markørhendelsen utløses. Sett også "markøren. stil "til" topp "," venstre "og" display ".

Etter dette bruker vi "funksjonen musestoppet", så når denne funksjonen ringer, vil den vise "ingen". Deretter bruker vi "Clear Timeout" -funksjonen og passerer "timeout" som en parameter og angir denne "timeout" nedenfor. Vi bruker igjen "Addvenetlisner" og lukker "skriptet" -merket her. Disse handler om “HTMLHTML” og “JavaScript”. Nå skal vi bruke CSS til styling.

CSS -kode

I CSS importerer vi “URL” og bruker “*” -velgeren, som brukes til å velge alle elementene. Vi setter "marginen" og "polstring" inne i "*" -velgeren til "0". "Bokstørrelsen" vi setter her er "Border-Box", som brukes til å spesifisere oppførselen til "bredden" og "høyden" og velge "font-family". Deretter bruker vi "kropp" og setter høyden til "100VH". "Bakgrunnen" er "svart" og setter "markøren" til "ingen".

Nå styler vi "hoved", og høyden er satt som "100VH". Vi bruker "Flex" -skjermen og "Justify-Content" til "Center", også "Align-Item" til "Center". Bruk den "hvite" fargen på "H1" og bruk “0.8 ”alfaverdi for dette. Vi setter "skriftstørrelse" på denne overskriften til "65px". Sett nå "Z-indeksen" til "markøren" som "999". "Posisjonen" for dette er "fast" og satt som "bakgrunn". "Bredde" og "høyde" er begge "20px", og "Border-Radius" er "50%". "Pointer-Event" er "ingen". "Box-shadow" vil legge til en eller flere skygger rundt elementene. Vi setter "H-offset", som er den horisontale forskyvningen, til "0", og "V-offset", som er den vertikale forskyvningen, til "0", og "uskarphet" er "20px" og " blå". Den samme "H-offset" og "V-offset" er i de to neste linjene, men "Blur" -verdien endres i hver som "60px" og "100px".

Vi bruker animasjon for “5s” og “Transform: Translate” -egenskapen her. Sett også "displayet" til "ingen". Nå brukes nøkkelrammer til animasjonen. Vi bruker også "før" -velgeren her og setter "innholdet" før dette. Sett "posisjonen" til "absolutt" og "bakgrunn" til "blå". "Bredde" og "høyde" er "50px". "Opaciteten" vi bruker er "0.2 ”, og egenskapen“ Transform-Translate ”er her. "Border-Radius" er "50%".

Produksjon

Videospillerhttps: // linuxhint.com/wp-content/uploads/2022/06/cursor_animation_on_mousemove_mouseout_mousestopped_profile_1.MP400: 0000: 0000: 09 Bruk opp/ned piltastene for å øke eller redusere volumet.

Eksempel nr. 2

I dette eksemplet oppretter vi den eksterne JavaScript -filen og kobler denne filen til HTML -filen vår og kobler CSS -filen.

Vi lager en "hoved" -klasse som heter "BG_CANVAS" inne i dette. Vi har en "div" klasse "header". Vi oppretter overskriften i denne "div". Det andre DIV -navnet er “Markør”, og etter den andre “Div” lukker vi “Main” og kobler JavaScript -filen her. Vi plasserte navnet på JavaScript -filen, “AnimatedMouse.JS ”, og lukket“ skriptet ”-koden.

CSS -kode

Vi setter "roten", som velger rotelementene i HTML og setter "svart" farge, "blå" farge og "hvit" farge i "RGB" -form, og "grønn" i "RGB". Deretter bruker vi "*" "-velgeren, som velger alle elementene, og vi gjør litt styling her, som vil gjelde for alle“ elementer ”. Vi setter nettopp "margin" og "polstring" her til "0".

Deretter styler vi "headeren". Hovedens "bredde" og "høyde" er henholdsvis "100%" og "300px". "Bokstørrelsen" er "Border-Box", og "Display" er "Flex". Vi "rettferdiggjør innholdet" og "Align-element" i "senteret". Vi styler også "markøren" og setter "bredden" og "høyden" som "20px" hver. Vi setter også "grensen" til "10px" bredde på den "solide" typen og setter fargen på grensen. Den "overgangs-varigheten" vi bruker er "200ms". Vi bruker "animasjon" og animerer markøren for "550 -tallet". Deretter bruker vi "After" -velgeren med "markøren" og setter innholdet. Vi setter også "bredde" og "høyde" som "40px", "grense" som "15px" i "solid" type, "grensen-radius" som "50%", og "absolutt" i "posisjon". "Toppen" og "venstre" er satt som "-25px" for hver og bruker deretter "animasjon" -egenskapen. Nå kommer "topptittel" og stil. Vi setter dens "font-family", og "vekten" av denne skrifttypen er "300". Vi justerer det i "sentrum", og "fontstørrelse" er "60px". "Fargen" er "svart" for skriften. Nå vil vi style “BG_Canvas”, som er navnet på klassen “Main”. Dens "bredde" er "100%" og "høyde" er "100VH" og setter sin "bakgrunnsfarge" og "kasse-størrelse".

Etter dette bruker vi "Markør-ekspand" og "animasjon" -egenskapen ". Vi setter også "grensen" for dette. Deretter bruker vi "After" -velgeren med denne "Cursor-Expand" og setter "grensen". Deretter bruker vi “KeyFrames” her, som vi bruker til animasjon, og bruker “From” Transform Scale (1) “To” Transform Scale (1.5), og det samme i følgende linjer:

JavaScript -kode

I følgende bilde er dette JavaScript -koden. Og denne koden er den samme som den forrige JavaScript -koden, som vi har forklart i vårt første eksempel. Vi lagrer JavaScript -filen med ".JS ”filtyvning og må koble denne filen med HTML -filen vår.

Produksjon

Videospillerhttps: // linuxhint.COM/WP-Content/Uploads/2022/06/Animert-Cursor-in-CSS-Profile-1-Microsoft_-kant-2022-06-03-11-07-03.MP400: 0000: 0000: 09 Bruk opp/ned piltastene for å øke eller redusere volumet.

Konklusjon

I denne guiden har vi diskutert den animerte markøren i CSS. Vi har skrevet denne artikkelen for å forklare hvordan du kan gjøre markøren din til en animert markør ved hjelp av CSS. Vi har brukt forskjellige egenskaper i CSS, og vi brukte HTML- og JavaScript -koden og har koblet disse filene for å lage den animerte markøren. Vi har undersøkt to forskjellige eksempler for å lage den animerte markøren av forskjellige stiler. Jeg håper at du etter å ha lest denne artikkelen vil lage den animerte markøren på nettstedene dine for å gjøre nettstedet ditt mer attraktivt.