CSS del cursore animato

L'animazione è qualcosa in cui l'oggetto appare come un oggetto in movimento. In CSS, possiamo dire che il cursore è un cursore animato quando anima la transizione da una configurazione CSS a un'altra. Quando il cursore cambia il suo stile da uno stile all'altro, possiamo determinare che il cursore è animato. Possiamo anche usare colori diversi per il cursore animato, quindi il cursore cambia il suo colore con il tempo. Possiamo rendere il nostro sito Web o i progetti più attraenti utilizzando il cursore animato. Attira l'utente verso di esso. Questa guida discuterà come realizzare il cursore animato in CSS. Per questo, dobbiamo usare un po 'di codice HTML e JavaScript. Progettiamo alcuni cursori animati qui usando HTML, CSS e JavaScript.

Esempio 1

Per creare il cursore animato, stiamo usando HTML, CSS e JavaScript in questo codice. Innanzitutto, dobbiamo creare il file HTML nel codice Visual Studio. Puoi usare qualsiasi editor a tua scelta. Qui stiamo usando il codice Visual Studio. Selezioniamo la lingua per il codice HTML come "HTML". E poi scrivi il codice qui. Forniamo anche il codice per il cursore animato in questo esempio. Puoi usare questo codice per creare il cursore animato. Ora, inizia con il codice HTML.

Creiamo la classe "Div" "Cursore" e una classe "Sezione" chiamata "Main" all'interno del "Div". Quindi, creiamo la seguente intestazione, la nostra intestazione 1 e chiudiamo il tag "sezione" qui. Successivamente, stiamo usando "JavaScript" in questo file "HTML". Usiamo il tag "script" e, nel suo tipo, diamo il nome di "JavaScript", che è "Testo/JavaScript". Con questo, definiamo il cursore "const" e usiamo la "query. selettore". La "query. Selector "viene utilizzato per restituire l'elemento," documento ", che corrisponderà al selettore e questo selettore è" cursore ".

Ora stiamo usando "var" e lo chiamavamo "timeout". Quindi arriva il metodo "addeventlisner". Allegerà un gestore di eventi all'elemento che specifichiamo qui. L'evento qui è il "mousemove", che si collega all'elemento "documento". Stiamo usando "let" per dichiarare una variabile "x" e inizializzarla con "E.Pagex ". La proprietà "Pagex" restituirà l'asse orizzontale del cursore quando viene attivato l'evento del cursore. E la variabile "y" con lo stesso tipo di dati "let", inizializza questo "y" con "E.Pagey ". La proprietà "Pagey" restituirà l'asse verticale del cursore quando viene attivato l'evento del cursore. Inoltre, imposta il "cursore. stile "in" top "," a sinistra "e" display ".

Dopo questo, utilizziamo la "funzione tonestopped", quindi quando questa funzione chiama, visualizzerà "nessuno". Quindi, stiamo usando la funzione "Cancella timeout" e passiamo "timeout" come parametro e imposta questo "timeout" di seguito. Usiamo di nuovo "addeventlisner" e chiudiamo il tag "script" qui. Si tratta di "htmlhtml" e "javascript". Ora useremo CSS per lo styling.

Codice CSS

Nel CSS, importa "URL" e utilizziamo il selettore "*", che viene utilizzato per selezionare tutti gli elementi. Abbiamo impostato il "margine" e "imbottitura" all'interno del selettore "*" su "0". Il "dimensionamento della scatola" che abbiamo impostato qui è "Border-Box", che viene utilizzato per specificare il comportamento della "larghezza" e "altezza" e selezionare la "famiglia-familiare". Quindi, usiamo "corpo" e impostiamo l'altezza su "100vh". Lo "sfondo" è "nero" e imposta il "cursore" su "nessuno".

Ora stiamo disegnando il "principale" e la sua altezza è impostata come "100vh". Stiamo utilizzando il display "Flex" e "Giustify-Content" al "Centro", anche "Allinee-elect" al "Centro". Applica il colore "bianco" su "H1" e usa "0.8 "Valore alfa per questo. Abbiamo impostato la "dimensione del carattere" di questa intestazione su "65px". Ora, imposta il "indice z" del "cursore" come "999". La "posizione" per questo è "fissa" e impostata come "background". La "larghezza" e "altezza" sono entrambe "20px" e il "raggio di confine" è "50%". L '"puntatore-evento" è "nessuno". Il "Box-Shadow" aggiungerà una o più ombre attorno alla cornice degli elementi. Abbiamo impostato l '"offset H", che è l'offset orizzontale, su "0", e "V-offset", che è l'offset verticale, su "0", e la "sfocatura" è "20px" e " blu". Lo stesso "H-offset" e "V-offset" sono nelle prossime due righe ma il valore "Blur" cambia in ciascuna come "60px" e "100px".

Usiamo l'animazione per "5s" e la proprietà "Transform: Translate" qui. Inoltre, imposta il suo "display" su "nessuno". Ora, i frame chiave vengono utilizzati per l'animazione. Inoltre, stiamo utilizzando il selettore "prima" qui e impostando il "contenuto" prima di questo. Imposta la "posizione" su "assoluto" e "sfondo" su "blu". La "larghezza" e "altezza" sono "50px". L '"opacità" che usiamo è "0.2 ", e la proprietà" trasformata-traspare "è qui. Il "raggio di confine" è "50%".

Produzione

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/cursore_animation_on_mousemove_mouseout_mousestopped_profile_1.MP400: 0000: 0000: 09 USA UP/DOWN CARME CHEY per aumentare o ridurre il volume.

Esempio n. 2

In questo esempio, creiamo il file JavaScript esterno e colleghiamo questo file al nostro file HTML e colleghiamo il file CSS.

Creiamo una classe "principale" chiamata "BG_CANVAS" all'interno di questo. Abbiamo una "intestazione" di Classe "Div". Creiamo l'intestazione in questo "div". L'altro nome Div è "cursore" e, dopo il secondo "div", chiudiamo il "principale" e colleghiamo il file JavaScript qui. Abbiamo inserito il nome del file JavaScript, "AnimatedMouse.JS "e ha chiuso il tag" script ".

Codice CSS

Impostamo la "root", che seleziona gli elementi di radice in HTML e imposta il colore "nero", il colore "blu" e il colore "bianco" in forma "RGB" e "verde" in "RGB". Quindi, usiamo il selettore "*", che seleziona tutti gli elementi, e facciamo un po 'di stile qui, che si applicherà a tutti gli "elementi". Abbiamo semplicemente impostato "margine" e "imbottitura" qui su "0".

Quindi, modelliamo la "intestazione". La "larghezza" e "altezza" dell'intestazione sono rispettivamente "100%" e "300px". Il "dimensionamento della scatola" è "bordo-box" e il "display" è "flex". "Giustifichiamo il contenuto" e "allineare" nel "centro". Accoldiamo anche il "cursore" e impostiamo la "larghezza" e "altezza" come "20px" ciascuno. Abbiamo anche impostato la larghezza del "bordo" su "10px" del tipo "solido" e impostiamo il colore del bordo. La "durata della transizione" che utilizziamo è "200ms". Usiamo "animazione" e animiamo il cursore per "550s". Quindi, utilizziamo il selettore "dopo" con il "cursore" e impostiamo il contenuto. Abbiamo anche impostato "larghezza" e "altezza" come "40px", "bordo" come "15px" nel tipo "solido", "radiio di confine" come "50%" e "assoluto" in "posizione". La "parte superiore" e "a sinistra" sono impostate come "-25px" per ciascuno e quindi usano la proprietà "animazione". Ora arriva il "punto di testa" e lo stile. Abbiamo impostato la sua "famiglia di caratteri" e il "peso" di questo carattere è "300". Lo allineiamo nel "centro" e "dimensioni dei caratteri" è "60px". Il "colore" è "nero" per il carattere. Ora, modelleremo "BG_CANVAS", che è il nome della classe "Main". La sua "larghezza" è "100%" e "altezza" è "100vh" e imposta il suo "colore di sfondo" e "dimensionamento della scatola".

Dopo questo, usiamo la proprietà "Cursore-Expand" e la proprietà "Animazione". Abbiamo anche impostato il "bordo" per questo. Quindi, usiamo il selettore "After" con questo "expand cursore" e impostiamo il suo "bordo". Quindi, stiamo usando i "keyframe" qui, che utilizziamo per l'animazione, e utilizziamo la scala di trasformazione "da 1)" a "(1.5) e lo stesso nelle seguenti righe:

Codice JavaScript

Nella seguente immagine, questo è il codice JavaScript. E questo codice è lo stesso del precedente codice JavaScript, che abbiamo spiegato nel nostro primo esempio. Salviamo il file JavaScript con ".JS ”Estensione del file e deve collegare questo file con il nostro file HTML.

Produzione

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/animated-css-css-produce-1-microsoft_-edie-2022-06-03-11-07-03.MP400: 0000: 0000: 09 USA UP/DOWN CARME CHEY per aumentare o ridurre il volume.

Conclusione

In questa guida, abbiamo discusso del cursore animato in CSS. Abbiamo scritto questo articolo per spiegare come rendere il tuo cursore un cursore animato usando CSS. Abbiamo usato proprietà diverse in CSS e abbiamo usato il codice HTML e JavaScript e abbiamo collegato questi file per creare il cursore animato. Abbiamo esplorato due diversi esempi per realizzare il cursore animato di stili diversi. Spero che dopo aver letto questo articolo renderà il cursore animato nei tuoi siti Web per rendere il tuo sito Web più attraente.